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.
// 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();
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.
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
Name
| Type
| Description
|
cssValues
| String[]
| 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 is 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
Name
| Type
| Description
|
url
| String
| The data source URL, including any query parameters.
|
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
Name
| Type
| Description
|
textStyle
| TextStyle
| The text style to use for the chart legend.
|
Return
AreaChartBuilder
— This builder, useful for chaining.
setPointStyle(style)
Sets the style for points in the line. By default, points have no particular styles, and only
the line is visible.
// Creates a line chart builder and sets large point style.
var builder = Charts.newLineChart();
builder.setPointStyle(Charts.PointStyle.LARGE);
Parameters
Name
| Type
| Description
|
style
| PointStyle
| The style to use for points in the line.
|
Return
AreaChartBuilder
— This builder, useful for chaining.
See also
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
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
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
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
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
Return
AreaChartBuilder
— This builder, useful for chaining.