functiondoGet(){// This example creates two table charts side by side. One uses a data view// definition to restrict the number of displayed columns.// Get sample data from a spreadsheet.constdataSourceUrl='https://docs.google.com/spreadsheet/tq?range=A1%3AF'+'&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=4&headers=-1';// Create a chart to display all of the data.constoriginalChart=Charts.newTableChart().setDimensions(600,500).setDataSourceUrl(dataSourceUrl).build();// Create another chart to display a subset of the data (only columns 1 and// 4).constdataViewDefinition=Charts.newDataViewDefinition().setColumns([0,3]);constlimitedChart=Charts.newTableChart().setDimensions(200,500).setDataSourceUrl(dataSourceUrl).setDataViewDefinition(dataViewDefinition).build();consthtmlOutput=HtmlService.createHtmlOutput();constoriginalChartData=Utilities.base64Encode(originalChart.getAs('image/png').getBytes(),);constoriginalChartUrl=`data:image/png;base64,${encodeURI(originalChartData)}`;constlimitedChartData=Utilities.base64Encode(limitedChart.getAs('image/png').getBytes(),);constlimitedChartUrl=`data:image/png;base64,${encodeURI(limitedChartData)}`;htmlOutput.append('<table><tr><td>');htmlOutput.append(`<img border="1" src="${originalChartUrl}">`);htmlOutput.append('</td><td>');htmlOutput.append(`<img border="1" src="${limitedChartUrl}">`);htmlOutput.append('</td></tr></table>');returnhtmlOutput;}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-07-26(UTC)"],[[["\u003cp\u003e\u003ccode\u003eDataViewDefinitionBuilder\u003c/code\u003e facilitates the creation of customized data views for charts in Google Apps Script.\u003c/p\u003e\n"],["\u003cp\u003eIt enables selecting specific columns and assigning roles to them, influencing the chart's data representation.\u003c/p\u003e\n"],["\u003cp\u003e\u003ccode\u003esetColumns\u003c/code\u003e method is crucial for defining which columns from the data source are included in the chart and their roles (e.g., categories, counts, style).\u003c/p\u003e\n"],["\u003cp\u003eUsing \u003ccode\u003ebuild\u003c/code\u003e, you can generate a \u003ccode\u003eDataViewDefinition\u003c/code\u003e object to apply the specified view to a chart.\u003c/p\u003e\n"]]],[],null,["DataViewDefinitionBuilder\n\nBuilder for [DataViewDefinition](/apps-script/reference/charts/data-view-definition) objects.\n\nHere's an example of using the builder. The data is [imported from a Google spreadsheet](https://developers.google.com/chart/interactive/docs/spreadsheets#Google_Spreadsheets_as_a_Data_Source).\n\n```javascript\nfunction doGet() {\n // This example creates two table charts side by side. One uses a data view\n // definition to restrict the number of displayed columns.\n\n // Get sample data from a spreadsheet.\n const dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=A1%3AF' +\n '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=4&headers=-1';\n\n // Create a chart to display all of the data.\n const originalChart = Charts.newTableChart()\n .setDimensions(600, 500)\n .setDataSourceUrl(dataSourceUrl)\n .build();\n\n // Create another chart to display a subset of the data (only columns 1 and\n // 4).\n const dataViewDefinition = Charts.newDataViewDefinition().setColumns([0, 3]);\n const limitedChart = Charts.newTableChart()\n .setDimensions(200, 500)\n .setDataSourceUrl(dataSourceUrl)\n .setDataViewDefinition(dataViewDefinition)\n .build();\n\n const htmlOutput = HtmlService.createHtmlOutput();\n const originalChartData = Utilities.base64Encode(\n originalChart.getAs('image/png').getBytes(),\n );\n const originalChartUrl =\n `data:image/png;base64,${encodeURI(originalChartData)}`;\n const limitedChartData = Utilities.base64Encode(\n limitedChart.getAs('image/png').getBytes(),\n );\n const limitedChartUrl =\n `data:image/png;base64,${encodeURI(limitedChartData)}`;\n htmlOutput.append('\u003ctable\u003e\u003ctr\u003e\u003ctd\u003e');\n htmlOutput.append(`\u003cimg border=\"1\" src=\"${originalChartUrl}\"\u003e`);\n htmlOutput.append('\u003c/td\u003e\u003ctd\u003e');\n htmlOutput.append(`\u003cimg border=\"1\" src=\"${limitedChartUrl}\"\u003e`);\n htmlOutput.append('\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e');\n return htmlOutput;\n}\n``` \n\nMethods\n\n| Method | Return type | Brief description |\n|--------------------------------------------|--------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------|\n| [build()](#build()) | [DataViewDefinition](/apps-script/reference/charts/data-view-definition) | Builds and returns the data view definition object that was built using this builder. |\n| [setColumns(columns)](#setColumns(Object)) | [DataViewDefinitionBuilder](#) | Sets the indexes of the columns to include in the data view as well as specifying role-column information. |\n\nDetailed documentation \n\n`build()` \nBuilds and returns the data view definition object that was built using this builder.\n\nReturn\n\n\n[DataViewDefinition](/apps-script/reference/charts/data-view-definition) --- A data view definition object that was built using this builder.\n\n*** ** * ** ***\n\n`set``Columns(columns)` \nSets the indexes of the columns to include in the data view as well as specifying role-column\ninformation. This subset of column indexes refer to the columns of the data source that the\ndata view is derived from.\n\nA column role describes the purpose of the data in that column: for example, a column might\nhold data describing tooltip text, data point annotations, or uncertainty indicators. For more\ndetails, see [DataTable Roles](/chart/interactive/docs/roles) in the Google Charts\ndocumentation.\n\nAssuming a spreadsheet with the following data in A1:C3:\n\n```text\n'abc', 20, 'blue';\n'def', 30, 'red';\n'ghi', 40, 'orange';\n```\nThe following code creates a bar chart where each bar is a different color. The colors are assigned via a style \"role column\". \n\n```javascript\nconst COLUMN_SPEC = [\n 0, // categories\n 1, // counts\n {sourceColumn: 2, role: 'style'},\n];\n\nfunction roleColumnChart() {\n const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();\n const sheet = spreadsheet.getActiveSheet();\n const viewSpec =\n Charts.newDataViewDefinition().setColumns(COLUMN_SPEC).build();\n const chartBuilder = sheet.newChart()\n .setChartType(Charts.ChartType.BAR)\n .setDataViewDefinition(viewSpec)\n .setOption('useFirstColumnAsDomain', true)\n .setPosition(5, 1, 0, 0)\n .setOption('hAxis', {title: 'Counts'})\n .setOption('vAxis', {title: 'Categories'})\n .addRange(sheet.getRange('A1:C3'));\n sheet.insertChart(chartBuilder.build());\n}\n```\n\nParameters\n\n| Name | Type | Description |\n|-----------|------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `columns` | `Object[]` | An array of column indexes, or column descriptions (an object), to include in the data view. The column descriptions define a column role. The data table and the enumeration for data view columns are zero-based. |\n\nReturn\n\n\n[DataViewDefinitionBuilder](#) --- This builder, useful for chaining."]]
