Google Apps Script

Class AreaChartBuilder

Builder for area charts. For more details, see the Google Charts documentation.

Here is an example that shows how to build an area chart.

 
function doGet() {
   // Create a data table with some sample data.
   var sampleData = Charts.newDataTable()
       .addColumn(Charts.ColumnType.STRING, "Month")
       .addColumn(Charts.ColumnType.NUMBER, "Dining")
       .addColumn(Charts.ColumnType.NUMBER, "Total")
       .addRow(["Jan", 60, 520])
       .addRow(["Feb", 50, 430])
       .addRow(["Mar", 53, 440])
       .addRow(["Apr", 70, 410])
       .addRow(["May", 80, 390])
       .addRow(["Jun", 60, 500])
       .addRow(["Jul", 100, 450])
       .addRow(["Aug", 140, 431])
       .addRow(["Sep", 75, 488])
       .addRow(["Oct", 70, 521])
       .addRow(["Nov", 58, 388])
       .addRow(["Dec", 63, 400])
       .build();
   
   var chart = Charts.newAreaChart()
       .setTitle('Yearly Spending')
       .setXAxisTitle('Month')
       .setYAxisTitle('Spending (USD)')
       .setDimensions(600, 500)
       .setStacked()
       .setColors(['red', 'green'])
       .setDataTable(sampleData)
       .build();
   
   return UiApp.createApplication().add(chart);
 }
 

Methods

MethodReturn typeBrief description
build()ChartBuilds the chart.
reverseCategories()AreaChartBuilderReverses the drawing of series in the domain axis.
setBackgroundColor(cssValue)AreaChartBuilderSets the background color for the chart.
setColors(cssValues)AreaChartBuilderSets the colors for the lines in the chart.
setDataSourceUrl(url)AreaChartBuilderSets the data source URL that will be used to pull data in from an external source, such as Google Sheets.
setDataTable(tableBuilder)AreaChartBuilderSets the data table to use for the chart using a DataTableBuilder.
setDataTable(table)AreaChartBuilderSets the data table which contains the lines for the chart, as well as the X-axis labels.
setDataViewDefinition(dataViewDefinition)AreaChartBuilderSets the data view definition to use for the chart.
setDimensions(width, height)AreaChartBuilderSets the dimensions for the chart.
setLegendPosition(position)AreaChartBuilderSets the position of the legend with respect to the chart.
setLegendTextStyle(textStyle)AreaChartBuilderSets the text style of the chart legend.
setOption(option, value)AreaChartBuilder

Sets advanced options for this chart.

setPointStyle(style)AreaChartBuilderSets the style for points in the line.
setRange(start, end)AreaChartBuilderSets the range for the chart.
setStacked()AreaChartBuilderUses stacked lines, meaning that line and bar values are stacked (accumulated).
setTitle(chartTitle)AreaChartBuilderSets the title of the chart.
setTitleTextStyle(textStyle)AreaChartBuilderSets the text style of the chart title.
setXAxisTextStyle(textStyle)AreaChartBuilderSets the horizontal axis text style.
setXAxisTitle(title)AreaChartBuilderAdds a title to the horizontal axis.
setXAxisTitleTextStyle(textStyle)AreaChartBuilderSets the horizontal axis title text style.
setYAxisTextStyle(textStyle)AreaChartBuilderSets the vertical axis text style.
setYAxisTitle(title)AreaChartBuilderAdds a title to the vertical axis.
setYAxisTitleTextStyle(textStyle)AreaChartBuilderSets the vertical axis title text style.
useLogScale()AreaChartBuilderMakes the range axis into a logarithmic scale (requires all values to be positive).

Detailed documentation

build()

Builds the chart.

Return

Chart — a Chart object, which can be embedded into documents, UI elements, or used as a static image


reverseCategories()

Reverses the drawing of series in the domain axis. For vertical-range charts (such as line, area or column charts), this means the horizontal axis is drawn from right to left. For horizontal-range charts (such as bar charts), this means the vertical axis is drawn from top to bottom. For pie charts, this means the slices are drawn counterclockwise.

 
// Creates a pie chart builder and sets drawing of the slices in a counter-clockwise manner.
 var builder = Charts.newPieChart();
 builder.reverseCategories();
 

Return

AreaChartBuilder — this builder, useful for chaining


setBackgroundColor(cssValue)

Sets the background color for the chart.

 
// Creates a line chart builder and sets the background color to gray
 var builder = Charts.newLineChart();
 builder.setBackgroundColor("gray");
 

Parameters

NameTypeDescription
cssValueStringthe CSS value for the color (such as "blue" or "#00f")

Return

AreaChartBuilder — this builder, useful for chaining


setColors(cssValues)

Sets the colors for the lines in the chart.

 
// Creates a line chart builder and sets the first two lines to be drawn in green and red,
 // respectively.
 var builder = Charts.newLineChart();
 builder.setColors(["green", "red"]);
 

Parameters

NameTypeDescription
cssValuesString[]an array of color CSS values, such as ["red", "#acf"]. The nth element in the array represents the color of the nth line in the chart.

Return

AreaChartBuilder — this builder, useful for chaining


setDataSourceUrl(url)

Sets the data source URL that will be used to pull data in from an external source, such as Google Sheets. If a data source URL and a DataTable are provided, the data source URL is ignored. For more information about querying data sources, check out the Google Charts documentation.

Parameters

NameTypeDescription
urlStringthe data source URL, including any query parameters

Return

AreaChartBuilder — this builder, useful for chaining


setDataTable(tableBuilder)

Sets the data table to use for the chart using a DataTableBuilder. This is a convenience method for setting the data table without needing to call build().

Parameters

NameTypeDescription
tableBuilderDataTableBuildera data table builder. A new data table will be created instantly as part of this call, so any further updates to the builder won't be reflected in the chart.

Return

AreaChartBuilder — this builder, useful for chaining


setDataTable(table)

Sets the data table which contains the lines for the chart, as well as the X-axis labels. The first column should be a string, and contain the horizontal axis labels. Any number of columns can follow, all must be numeric. Each column is displayed as a separate line.

Parameters

NameTypeDescription
tableDataTableSourcethe data table to use for the chart

Return

AreaChartBuilder — this builder, useful for chaining


setDataViewDefinition(dataViewDefinition)

Sets the data view definition to use for the chart.

Parameters

NameTypeDescription
dataViewDefinitionDataViewDefinitiona data view definition object that defines the view that should be derived from the given data source for the chart drawing

Return

AreaChartBuilder — this builder, useful for chaining


setDimensions(width, height)

Sets the dimensions for the chart.

Parameters

NameTypeDescription
widthIntegerthe width of the chart, in pixels
heightIntegerthe height of the chart, in pixels

Return

AreaChartBuilder — this builder, useful for chaining


setLegendPosition(position)

Sets the position of the legend with respect to the chart. By default, there will be no legend.

 
// Creates a line chart builder and sets the legend position to right.
 var builder = Charts.newLineChart();
 builder.setLegendPosition(Charts.Position.RIGHT);
 

Parameters

NameTypeDescription
positionPositionthe position of the legend

Return

AreaChartBuilder — this builder, useful for chaining


setLegendTextStyle(textStyle)

Sets the text style of the chart legend.

 
// Creates a line chart builder and sets it up for a  blue, 26-point legend.
 var textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
 var style = textStyleBuilder.build();
 var builder = Charts.newLineChart();
 builder.setLegendTextStyle(style);
 

Parameters

NameTypeDescription
textStyleTextStylethe text style to use for the chart legend.

Return

AreaChartBuilder — this builder, useful for chaining


setOption(option, value)

Sets advanced options for this chart. See the available options for this chart. This method has no effect if the given option is invalid.

 
// Build an area chart with a 1-second animation duration.
 var builder = Charts.newAreaChart();
 builder.setOption('animation.duration', 1000); 
 var chart = builder.build();
 

Parameters

NameTypeDescription
optionStringthe option to set
valueObjectthe value to set

Return

AreaChartBuilder — this builder, useful for chaining


setPointStyle(style)

Sets the style for points in the line. By default, points will have no particular styles, and only the line will be visible.

 
// Creates a line chart builder and sets large point style.
 var builder = Charts.newLineChart();
 builder.setPointStyle(Charts.PointStyle.LARGE);
 

Parameters

NameTypeDescription
stylePointStylethe style to use for points in the line

Return

AreaChartBuilder — this builder, useful for chaining

See also


setRange(start, end)

Sets the range for the chart.

If any data points fall outside the range, the range will be expanded to include those data points.

Parameters

NameTypeDescription
startNumbervalue for the lowest grid line of the range axis
endNumbervalue for the highest grid line of the range axis

Return

AreaChartBuilder — this builder, useful for chaining


setStacked()

Uses stacked lines, meaning that line and bar values are stacked (accumulated). By default, there is no stacking.

Return

AreaChartBuilder — this builder, useful for chaining


setTitle(chartTitle)

Sets the title of the chart. The title will be displayed centered above the chart.

 
// Creates a line chart builder and title to 'My Line Chart'.
 var builder = Charts.newLineChart();
 builder.setTitle('My Line Chart')
 

Parameters

NameTypeDescription
chartTitleStringthe chart title.

Return

AreaChartBuilder — this builder, useful for chaining


setTitleTextStyle(textStyle)

Sets the text style of the chart title.

 
// Creates a line chart builder and sets it up for a  blue, 26-point title.
 var textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
 var style = textStyleBuilder.build();
 var builder = Charts.newLineChart();
 builder.setTitleTextStyle(style);
 

Parameters

NameTypeDescription
textStyleTextStylethe text style to use for the chart title. TextStyleBuilder object can be created by calling Charts.newTextStyle().

Return

AreaChartBuilder — this builder, useful for chaining


setXAxisTextStyle(textStyle)

Sets the horizontal axis text style.

 
// Creates a line chart builder and sets the X-axis text style to blue, 18-point font.
 var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
 var builder = Charts.newLineChart();
 builder.setXAxisTextStyle(textStyle);
 

Parameters

NameTypeDescription
textStyleTextStylethe text style to use for the horizontal axis title. TextStyleBuilder object can be created by calling Charts.newTextStyle().

Return

AreaChartBuilder — this builder, useful for chaining


setXAxisTitle(title)

Adds a title to the horizontal axis. The title will be centered and will appear below the axis value labels.

 
// Creates a line chart builder and sets the X-axis title.
 var builder = Charts.newLineChart();
 builder.setTitle('X-axis Title')
 

Parameters

NameTypeDescription
titleStringthe title for the X-axis

Return

AreaChartBuilder — this builder, useful for chaining


setXAxisTitleTextStyle(textStyle)

Sets the horizontal axis title text style.

 
// Creates a line chart builder and sets the X-axis title text style to blue, 18-point font.
 var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
 var builder = Charts.newLineChart();
 builder.setXAxisTitleTextStyle(textStyle);
 

Parameters

NameTypeDescription
textStyleTextStylethe text style to use for the horizontal axis title. TextStyleBuilder object can be created by calling Charts.newTextStyle().

Return

AreaChartBuilder — this builder, useful for chaining


setYAxisTextStyle(textStyle)

Sets the vertical axis text style.

 
// Creates a line chart builder and sets the Y-axis text style to blue, 18-point font.
 var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
 var builder = Charts.newLineChart();
 builder.setYAxisTextStyle(textStyle);
 

Parameters

NameTypeDescription
textStyleTextStylethe text style to use for the horizontal axis title. TextStyleBuilder object can be created by calling Charts.newTextStyle().

Return

AreaChartBuilder — this builder, useful for chaining


setYAxisTitle(title)

Adds a title to the vertical axis. The title will be centered and will appear to the left of the value labels.

 
// Creates a line chart builder and sets the Y-axis title.
 var builder = Charts.newLineChart();
 builder.setTitle('Y-axis Title')
 

Parameters

NameTypeDescription
titleStringthe title for the Y-axis

Return

AreaChartBuilder — this builder, useful for chaining


setYAxisTitleTextStyle(textStyle)

Sets the vertical axis title text style.

 
// Creates a line chart builder and sets the Y-axis title text style to blue, 18-point font.
 var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
 var builder = Charts.newLineChart();
 builder.setYAxisTitleTextStyle(textStyle);
 

Parameters

NameTypeDescription
textStyleTextStylethe text style to use for the horizontal axis title. TextStyleBuilder object can be created by calling Charts.newTextStyle().

Return

AreaChartBuilder — this builder, useful for chaining


useLogScale()

Makes the range axis into a logarithmic scale (requires all values to be positive). The range axis will be the vertical axis for vertical charts (line, area, column, etc.) and the horizontal axis for horizontal charts (bar, etc.)

Return

AreaChartBuilder — this builder, useful for chaining

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.