AI-generated Key Takeaways
-
The Google Apps Script Charts Service enables server-side rendering of charts using Google Charts Tools, offering an alternative to the client-side Google Charts API.
-
Charts are built using a structured process involving data table creation, chart construction with specific configurations like type, data source, and styling, and HTML output generation for display.
-
The Charts Service provides a range of chart types, including AreaChart, BarChart, ColumnChart, LineChart, PieChart, ScatterChart, and TableChart, each with corresponding builder classes for customization.
-
Comprehensive documentation details various classes and methods for data manipulation, visual styling, axes configuration, and interactive element creation, empowering developers to tailor charts to their needs.
-
Developers can leverage methods from ScatterChartBuilder, StringFilterBuilder, TableChartBuilder, TextStyle, and TextStyleBuilder to fine-tune chart axes, filtering, table layouts, and text styles, enhancing chart customization and functionality.
This service allows users to create charts using Google Charts Tools and render them server side. If you want to render charts in a web browser, use the Google Charts API instead.
This example creates a basic data table, populates an area chart with the data, and adds it to a web page as an image:
function doGet() {
var data = Charts.newDataTable()
.addColumn(Charts.ColumnType.STRING, 'Month')
.addColumn(Charts.ColumnType.NUMBER, 'In Store')
.addColumn(Charts.ColumnType.NUMBER, 'Online')
.addRow(['January', 10, 1])
.addRow(['February', 12, 1])
.addRow(['March', 20, 2])
.addRow(['April', 25, 3])
.addRow(['May', 30, 4])
.build();
var chart = Charts.newAreaChart()
.setDataTable(data)
.setStacked()
.setRange(0, 40)
.setTitle('Sales per Month')
.build();
var htmlOutput = HtmlService.createHtmlOutput().setTitle('My Chart');
var imageData = Utilities.base64Encode(chart.getAs('image/png').getBytes());
var imageUrl = "data:image/png;base64," + encodeURI(imageData);
htmlOutput.append("Render chart server side: <br/>");
htmlOutput.append("<img border=\"1\" src=\"" + imageUrl + "\">");
return htmlOutput;
}
Classes
Name | Brief description |
---|---|
Area | Builder for area charts. |
Bar | Builder for bar charts. |
Chart | A Chart object, which can be converted to a static image. |
Chart | An enumeration of how hidden dimensions in a source are expressed in a chart. |
Chart | An enumeration of how multiple ranges in the source are expressed in a chart. |
Chart | Exposes options currently configured for a Chart , such as height, color, etc. |
Chart | Chart types supported by the Charts service. |
Charts | Entry point for creating Charts in scripts. |
Column | Builder for column charts. |
Column | An enumeration of the valid data types for columns in a Data . |
Curve | An enumeration of the styles for curves in a chart. |
Data | A Data Table to be used in charts. |
Data | Builder of DataTable objects. |
Data | Interface for objects that can represent their data as a Data . |
Data | A data view definition for visualizing chart data. |
Data | Builder for Data objects. |
Line | Builder for line charts. |
Match | An enumeration of how a string value should be matched. |
Number | A builder for number range filter controls. |
Orientation | An enumeration of the orientation of an object. |
Picker | An enumeration of how to display selected values in picker widget. |
Pie | A builder for pie charts. |
Point | An enumeration of the styles of points in a line. |
Position | An enumeration of legend positions within a chart. |
Scatter | Builder for scatter charts. |
String | A builder for string filter controls. |
Table | A builder for table charts. |
Text | A text style configuration object. |
Text | A builder used to create Text objects. |
AreaChartBuilder
Methods
Method | Return type | Brief description |
---|---|---|
build() | Chart | Builds the chart. |
reverse | Area | Reverses the drawing of series in the domain axis. |
set | Area | Sets the background color for the chart. |
set | Area | Sets the colors for the lines in the chart. |
set | Area | Sets the data source URL that is used to pull data in from an external source, such as Google Sheets. |
set | Area | Sets the data table to use for the chart using a DataTableBuilder. |
set | Area | Sets the data table which contains the lines for the chart, as well as the X-axis labels. |
set | Area | Sets the data view definition to use for the chart. |
set | Area | Sets the dimensions for the chart. |
set | Area | Sets the position of the legend with respect to the chart. |
set | Area | Sets the text style of the chart legend. |
set | Area | Sets advanced options for this chart. |
set | Area | Sets the style for points in the line. |
set | Area | Sets the range for the chart. |
set | Area | Uses stacked lines, meaning that line and bar values are stacked (accumulated). |
set | Area | Sets the title of the chart. |
set | Area | Sets the text style of the chart title. |
set | Area | Sets the horizontal axis text style. |
set | Area | Adds a title to the horizontal axis. |
set | Area | Sets the horizontal axis title text style. |
set | Area | Sets the vertical axis text style. |
set | Area | Adds a title to the vertical axis. |
set | Area | Sets the vertical axis title text style. |
use | Area | Makes the range axis into a logarithmic scale (requires all values to be positive). |
BarChartBuilder
Methods
Method | Return type | Brief description |
---|---|---|
build() | Chart | Builds the chart. |
reverse | Bar | Reverses the drawing of series in the domain axis. |
reverse | Bar | Reverses the direction in which the bars grow along the horizontal axis. |
set | Bar | Sets the background color for the chart. |
set | Bar | Sets the colors for the lines in the chart. |
set | Bar | Sets the data source URL that is used to pull data in from an external source, such as Google Sheets. |
set | Bar | Sets the data table to use for the chart using a DataTableBuilder. |
set | Bar | Sets the data table which contains the lines for the chart, as well as the X-axis labels. |
set | Bar | Sets the data view definition to use for the chart. |
set | Bar | Sets the dimensions for the chart. |
set | Bar | Sets the position of the legend with respect to the chart. |
set | Bar | Sets the text style of the chart legend. |
set | Bar | Sets advanced options for this chart. |
set | Bar | Sets the range for the chart. |
set | Bar | Uses stacked lines, meaning that line and bar values are stacked (accumulated). |
set | Bar | Sets the title of the chart. |
set | Bar | Sets the text style of the chart title. |
set | Bar | Sets the horizontal axis text style. |
set | Bar | Adds a title to the horizontal axis. |
set | Bar | Sets the horizontal axis title text style. |
set | Bar | Sets the vertical axis text style. |
set | Bar | Adds a title to the vertical axis. |
set | Bar | Sets the vertical axis title text style. |
use | Bar | Makes the range axis into a logarithmic scale (requires all values to be positive). |
Chart
Methods
Method | Return type | Brief description |
---|---|---|
get | Blob | Return the data inside this object as a blob converted to the specified content type. |
get | Blob | Return the data inside this object as a blob. |
get | Chart | Returns the options for this chart, such as height, colors, and axes. |
ChartHiddenDimensionStrategy
Properties
Property | Type | Description |
---|---|---|
IGNORE_BOTH | Enum | Default; charts skips any hidden columns and hidden rows. |
IGNORE_ROWS | Enum | Charts skips hidden rows only. |
IGNORE_COLUMNS | Enum | Charts skips hidden columns only. |
SHOW_BOTH | Enum | Charts does not skip hidden columns or hidden rows. |
ChartMergeStrategy
Properties
Property | Type | Description |
---|---|---|
MERGE_COLUMNS | Enum | Default. |
MERGE_ROWS | Enum | Charts merges the rows of multiple ranges. |
ChartOptions
Methods
Method | Return type | Brief description |
---|---|---|
get(option) | Object | Returns a configured option for this chart. |
get | Object | Returns a configured option for this chart. |
ChartType
Properties
Property | Type | Description |
---|---|---|
TIMELINE | Enum | Timeline chart. |
AREA | Enum | Area chart |
BAR | Enum | Bar chart |
BUBBLE | Enum | Bubble chart. |
CANDLESTICK | Enum | Candlestick chart. |
COLUMN | Enum | Column chart |
COMBO | Enum | Combo chart |
GAUGE | Enum | Gauge chart. |
GEO | Enum | Geo chart. |
HISTOGRAM | Enum | Histogram |
RADAR | Enum | Radar chart. |
LINE | Enum | Line chart |
ORG | Enum | Org chart. |
PIE | Enum | Pie chart |
SCATTER | Enum | Scatter chart |
SPARKLINE | Enum | Sparkline chart. |
STEPPED_AREA | Enum | Stepped area chart. |
TABLE | Enum | Table chart |
TREEMAP | Enum | Treemap chart. |
WATERFALL | Enum | Waterfall chart. |
Charts
Properties
Property | Type | Description |
---|---|---|
Chart | Chart | An enumeration of how hidden dimensions in a source are expressed in a chart. |
Chart | Chart | An enumeration of how multiple ranges in the source are expressed in a chart. |
Chart | Chart | An enumeration of chart types supported by the Charts service. |
Column | Column | An enumeration of the valid data types for columns in a Data . |
Curve | Curve | An enumeration of the styles for curves in a chart. |
Point | Point | An enumeration of the styles of points in a line. |
Position | Position | An enumeration of legend positions within a chart. |
Methods
Method | Return type | Brief description |
---|---|---|
new | Area | Starts building an area chart, as described in the Google Chart Tools documentation. |
new | Bar | Starts building a bar chart, as described in the Google Chart Tools documentation. |
new | Column | Starts building a column chart, as described in the Google Chart Tools documentation. |
new | Data | Creates an empty data table, which can have its values set manually. |
new | Data | Creates a new data view definition. |
new | Line | Starts building a line chart, as described in the Google Chart Tools documentation. |
new | Pie | Starts building a pie chart, as described in the Google Chart Tools documentation. |
new | Scatter | Starts building a scatter chart, as described in the Google Chart Tools documentation. |
new | Table | Starts building a table chart, as described in the Google Chart Tools documentation. |
new | Text | Creates a new text style builder. |
ColumnChartBuilder
Methods
Method | Return type | Brief description |
---|---|---|
build() | Chart | Builds the chart. |
reverse | Column | Reverses the drawing of series in the domain axis. |
set | Column | Sets the background color for the chart. |
set | Column | Sets the colors for the lines in the chart. |
set | Column | Sets the data source URL that is used to pull data in from an external source, such as Google Sheets. |
set | Column | Sets the data table to use for the chart using a DataTableBuilder. |
set | Column | Sets the data table which contains the lines for the chart, as well as the X-axis labels. |
set | Column | Sets the data view definition to use for the chart. |
set | Column | Sets the dimensions for the chart. |
set | Column | Sets the position of the legend with respect to the chart. |
set | Column | Sets the text style of the chart legend. |
set | Column | Sets advanced options for this chart. |
set | Column | Sets the range for the chart. |
set | Column | Uses stacked lines, meaning that line and bar values are stacked (accumulated). |
set | Column | Sets the title of the chart. |
set | Column | Sets the text style of the chart title. |
set | Column | Sets the horizontal axis text style. |
set | Column | Adds a title to the horizontal axis. |
set | Column | Sets the horizontal axis title text style. |
set | Column | Sets the vertical axis text style. |
set | Column | Adds a title to the vertical axis. |
set | Column | Sets the vertical axis title text style. |
use | Column | Makes the range axis into a logarithmic scale (requires all values to be positive). |
ColumnType
Properties
Property | Type | Description |
---|---|---|
DATE | Enum | Corresponds to date values. |
NUMBER | Enum | Corresponds to number values. |
STRING | Enum | Corresponds to string values. |
CurveStyle
Properties
Property | Type | Description |
---|---|---|
NORMAL | Enum | Straight lines without curve. |
SMOOTH | Enum | The angles of the line are smoothed. |
DataTable
DataTableBuilder
Methods
Method | Return type | Brief description |
---|---|---|
add | Data | Adds a column to the data table. |
add | Data | Adds a row to the data table. |
build() | Data | Builds and returns a data table. |
set | Data | Sets a specific value in the table. |
DataTableSource
Methods
Method | Return type | Brief description |
---|---|---|
get | Data | Return the data inside this object as a DataTable. |
DataViewDefinition
DataViewDefinitionBuilder
Methods
Method | Return type | Brief description |
---|---|---|
build() | Data | Builds and returns the data view definition object that was built using this builder. |
set | Data | Sets the indexes of the columns to include in the data view as well as specifying role-column information. |
LineChartBuilder
Methods
Method | Return type | Brief description |
---|---|---|
build() | Chart | Builds the chart. |
reverse | Line | Reverses the drawing of series in the domain axis. |
set | Line | Sets the background color for the chart. |
set | Line | Sets the colors for the lines in the chart. |
set | Line | Sets the style to use for curves in the chart. |
set | Line | Sets the data source URL that is used to pull data in from an external source, such as Google Sheets. |
set | Line | Sets the data table to use for the chart using a DataTableBuilder. |
set | Line | Sets the data table which contains the lines for the chart, as well as the X-axis labels. |
set | Line | Sets the data view definition to use for the chart. |
set | Line | Sets the dimensions for the chart. |
set | Line | Sets the position of the legend with respect to the chart. |
set | Line | Sets the text style of the chart legend. |
set | Line | Sets advanced options for this chart. |
set | Line | Sets the style for points in the line. |
set | Line | Sets the range for the chart. |
set | Line | Sets the title of the chart. |
set | Line | Sets the text style of the chart title. |
set | Line | Sets the horizontal axis text style. |
set | Line | Adds a title to the horizontal axis. |
set | Line | Sets the horizontal axis title text style. |
set | Line | Sets the vertical axis text style. |
set | Line | Adds a title to the vertical axis. |
set | Line | Sets the vertical axis title text style. |
use | Line | Makes the range axis into a logarithmic scale (requires all values to be positive). |
MatchType
Properties
Property | Type | Description |
---|---|---|
EXACT | Enum | Match exact values only |
PREFIX | Enum | Match prefixes starting from the beginning of the value |
ANY | Enum | Match any substring |
Methods
Method | Return type | Brief description |
---|---|---|
get | String | Returns the name of the match type to be used in the options JSON. |
NumberRangeFilterBuilder
Methods
Method | Return type | Brief description |
---|---|---|
set | Number | Sets the maximum allowed value for the range lower extent. |
set | Number | Sets the minimum allowed value for the range lower extent. |
set | Number | Sets the slider orientation. |
set | Number | Sets whether to have labels next to the slider displaying extents of the selected range. |
set | Number | Sets the number of ticks (fixed positions in a range bar) a number range filter slider thumbs can fall in. |
Orientation
Properties
Property | Type | Description |
---|---|---|
HORIZONTAL | Enum | Horizontal orientation. |
VERTICAL | Enum | Vertical orientation. |
PickerValuesLayout
Properties
Property | Type | Description |
---|---|---|
ASIDE | Enum | Selected values display in a single text line next to the value picker widget. |
BELOW | Enum | Selected values display in a single text line below the widget. |
BELOW_WRAPPING | Enum | Similar to below, but entries that cannot fit in the picker wrap to a new line. |
BELOW_STACKED | Enum | Selected values display in a column below the widget. |
PieChartBuilder
Methods
Method | Return type | Brief description |
---|---|---|
build() | Chart | Builds the chart. |
reverse | Pie | Reverses the drawing of series in the domain axis. |
set3D() | Pie | Sets the chart to be three-dimensional. |
set | Pie | Sets the background color for the chart. |
set | Pie | Sets the colors for the lines in the chart. |
set | Pie | Sets the data source URL that is used to pull data in from an external source, such as Google Sheets. |
set | Pie | Sets the data table to use for the chart using a DataTableBuilder. |
set | Pie | Sets the data table which contains the lines for the chart, as well as the X-axis labels. |
set | Pie | Sets the data view definition to use for the chart. |
set | Pie | Sets the dimensions for the chart. |
set | Pie | Sets the position of the legend with respect to the chart. |
set | Pie | Sets the text style of the chart legend. |
set | Pie | Sets advanced options for this chart. |
set | Pie | Sets the title of the chart. |
set | Pie | Sets the text style of the chart title. |
PointStyle
Properties
Property | Type | Description |
---|---|---|
NONE | Enum | Do not display line points. |
TINY | Enum | Use tiny line points. |
MEDIUM | Enum | Use medium sized line points. |
LARGE | Enum | Use large sized line points. |
HUGE | Enum | Use largest sized line points. |
Position
Properties
Property | Type | Description |
---|---|---|
TOP | Enum | Above the chart. |
RIGHT | Enum | To the right of the chart. |
BOTTOM | Enum | Below the chart. |
NONE | Enum | No legend is displayed. |
ScatterChartBuilder
Methods
Method | Return type | Brief description |
---|---|---|
build() | Chart | Builds the chart. |
set | Scatter | Sets the background color for the chart. |
set | Scatter | Sets the colors for the lines in the chart. |
set | Scatter | Sets the data source URL that is used to pull data in from an external source, such as Google Sheets. |
set | Scatter | Sets the data table to use for the chart using a DataTableBuilder. |
set | Scatter | Sets the data table which contains the lines for the chart, as well as the X-axis labels. |
set | Scatter | Sets the data view definition to use for the chart. |
set | Scatter | Sets the dimensions for the chart. |
set | Scatter | Sets the position of the legend with respect to the chart. |
set | Scatter | Sets the text style of the chart legend. |
set | Scatter | Sets advanced options for this chart. |
set | Scatter | Sets the style for points in the line. |
set | Scatter | Sets the title of the chart. |
set | Scatter | Sets the text style of the chart title. |
set | Scatter | Makes the horizontal axis into a logarithmic scale (requires all values to be positive). |
set | Scatter | Sets the range for the horizontal axis of the chart. |
set | Scatter | Sets the horizontal axis text style. |
set | Scatter | Adds a title to the horizontal axis. |
set | Scatter | Sets the horizontal axis title text style. |
set | Scatter | Makes the vertical axis into a logarithmic scale (requires all values to be positive). |
set | Scatter | Sets the range for the vertical axis of the chart. |
set | Scatter | Sets the vertical axis text style. |
set | Scatter | Adds a title to the vertical axis. |
set | Scatter | Sets the vertical axis title text style. |
StringFilterBuilder
Methods
Method | Return type | Brief description |
---|---|---|
set | String | Sets whether matching should be case sensitive or not. |
set | String | Sets whether the control should match exact values only (Match ), prefixes
starting from the beginning of the value (Match ), or any substring
(Match ). |
set | String | Sets whether the control should match any time a key is pressed or only when the input field 'changes' (loss of focus or pressing the Enter key). |
TableChartBuilder
Methods
Method | Return type | Brief description |
---|---|---|
build() | Chart | Builds the chart. |
enable | Table | Sets whether to enable paging through the data. |
enable | Table | Enables paging and sets the number of rows in each page. |
enable | Table | Enables paging, sets the number of rows in each page and the first table page to display (page numbers are zero based). |
enable | Table | Adds basic support for right-to-left languages (such as Arabic or Hebrew) by reversing the column order of the table, so that column zero is the right-most column, and the last column is the left-most column. |
enable | Table | Sets whether to sort columns when the user clicks a column heading. |
set | Table | Sets the data source URL that is used to pull data in from an external source, such as Google Sheets. |
set | Table | Sets the data table to use for the chart using a DataTableBuilder. |
set | Table | Sets the data table which contains the lines for the chart, as well as the X-axis labels. |
set | Table | Sets the data view definition to use for the chart. |
set | Table | Sets the dimensions for the chart. |
set | Table | Sets the row number for the first row in the data table. |
set | Table | Sets the index of the column according to which the table should be initially sorted (ascending). |
set | Table | Sets the index of the column according to which the table should be initially sorted (descending). |
set | Table | Sets advanced options for this chart. |
show | Table | Sets whether to show the row number as the first column of the table. |
use | Table | Sets whether alternating color style is assigned to odd and even rows of a table chart. |
TextStyle
Methods
Method | Return type | Brief description |
---|---|---|
get | String | Gets the color of the text style. |
get | String | Gets the font name of the text style. |
get | Number | Gets the font size of the text style. |
TextStyleBuilder
Methods
Method | Return type | Brief description |
---|---|---|
build() | Text | Builds and returns a text style configuration object that was built using this builder. |
set | Text | Sets the color of the text style. |
set | Text | Sets the font name of the text style. |
set | Text | Sets the font size of the text style. |