Class ScatterChartBuilder

ScatterChartBuilder

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

Here is an example that shows how to build a scatter chart. The data is imported from a Google spreadsheet.

// Get sample data from a spreadsheet.
var dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=C1%3AD' +
    '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=4&headers=-1';

var chartBuilder = Charts.newScatterChart()
    .setTitle('Adjusted GDP & U.S. Population')
    .setXAxisTitle('U.S. Population (millions)')
    .setYAxisTitle('Adjusted GDP ($ billions)')
    .setDimensions(600, 500)
    .setLegendPosition(Charts.Position.NONE)
    .setDataSourceUrl(dataSourceUrl);

var chart = chartBuilder.build();

Methods

MethodReturn typeBrief description
build()ChartBuilds the chart.
setBackgroundColor(cssValue)ScatterChartBuilderSets the background color for the chart.
setColors(cssValues)ScatterChartBuilderSets the colors for the lines in the chart.
setDataSourceUrl(url)ScatterChartBuilderSets the data source URL that is used to pull data in from an external source, such as Google Sheets.
setDataTable(tableBuilder)ScatterChartBuilderSets the data table to use for the chart using a DataTableBuilder.
setDataTable(table)ScatterChartBuilderSets the data table which contains the lines for the chart, as well as the X-axis labels.
setDataViewDefinition(dataViewDefinition)ScatterChartBuilderSets the data view definition to use for the chart.
setDimensions(width, height)ScatterChartBuilderSets the dimensions for the chart.
setLegendPosition(position)ScatterChartBuilderSets the position of the legend with respect to the chart.
setLegendTextStyle(textStyle)ScatterChartBuilderSets the text style of the chart legend.
setOption(option, value)ScatterChartBuilderSets advanced options for this chart.
setPointStyle(style)ScatterChartBuilderSets the style for points in the line.
setTitle(chartTitle)ScatterChartBuilderSets the title of the chart.
setTitleTextStyle(textStyle)ScatterChartBuilderSets the text style of the chart title.
setXAxisLogScale()ScatterChartBuilderMakes the horizontal axis into a logarithmic scale (requires all values to be positive).
setXAxisRange(start, end)ScatterChartBuilderSets the range for the horizontal axis of the chart.
setXAxisTextStyle(textStyle)ScatterChartBuilderSets the horizontal axis text style.
setXAxisTitle(title)ScatterChartBuilderAdds a title to the horizontal axis.
setXAxisTitleTextStyle(textStyle)ScatterChartBuilderSets the horizontal axis title text style.
setYAxisLogScale()ScatterChartBuilderMakes the vertical axis into a logarithmic scale (requires all values to be positive).
setYAxisRange(start, end)ScatterChartBuilderSets the range for the vertical axis of the chart.
setYAxisTextStyle(textStyle)ScatterChartBuilderSets the vertical axis text style.
setYAxisTitle(title)ScatterChartBuilderAdds a title to the vertical axis.
setYAxisTitleTextStyle(textStyle)ScatterChartBuilderSets the vertical axis title text style.

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.


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

ScatterChartBuilder — 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

ScatterChartBuilder — 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

NameTypeDescription
urlStringThe data source URL, including any query parameters.

Return

ScatterChartBuilder — 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 is created instantly as part of this call, so any further updates to the builder won't be reflected in the chart.

Return

ScatterChartBuilder — 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

ScatterChartBuilder — 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

ScatterChartBuilder — 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

ScatterChartBuilder — This builder, useful for chaining.


setLegendPosition(position)

Sets the position of the legend with respect to the chart. By default, there is 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

ScatterChartBuilder — 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

ScatterChartBuilder — 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 a scatter chart with a 1-second animation duration.
var builder = Charts.newScatterChart();
builder.setOption('animation.duration', 1000);
var chart = builder.build();

Parameters

NameTypeDescription
optionStringThe option to set.
valueObjectThe value to set.

Return

ScatterChartBuilder — 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

NameTypeDescription
stylePointStyleThe style to use for points in the line.

Return

ScatterChartBuilder — This builder, useful for chaining.

See also


setTitle(chartTitle)

Sets the title of the chart. The title is 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

ScatterChartBuilder — 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. You can create a TextStyleBuilder object by calling Charts.newTextStyle().

Return

ScatterChartBuilder — This builder, useful for chaining.


setXAxisLogScale()

Makes the horizontal axis into a logarithmic scale (requires all values to be positive).

Return

ScatterChartBuilder — This builder, useful for chaining.


setXAxisRange(start, end)

Sets the range for the horizontal axis of the chart.

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

// Creates a scatter chart builder and sets the X-axis range to be 0 to 100.
var builder = Charts.newTableChart();
builder.setXAxisRange(0, 100);

Parameters

NameTypeDescription
startNumberThe value for the lowest grid line of the horizontal axis.
endNumberThe value for the highest grid line of the horizontal axis.

Return

ScatterChartBuilder — 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. You can create a TextStyleBuilder object by calling Charts.newTextStyle().

Return

ScatterChartBuilder — This builder, useful for chaining.


setXAxisTitle(title)

Adds a title to the horizontal axis. The title is centered and appears 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

ScatterChartBuilder — 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. You can create a TextStyleBuilder object by calling Charts.newTextStyle().

Return

ScatterChartBuilder — This builder, useful for chaining.


setYAxisLogScale()

Makes the vertical axis into a logarithmic scale (requires all values to be positive).

Return

ScatterChartBuilder — This builder, useful for chaining.


setYAxisRange(start, end)

Sets the range for the vertical axis of the chart. If any data points fall outside the range, the range is expanded to include those data points.

// Creates a scatter chart builder and sets the Y-axis range to be 0 to 100.
var builder = Charts.newTableChart();
builder.setYAxisRange(0, 100);

Parameters

NameTypeDescription
startNumberThe value for the lowest grid line of the vertical axis.
endNumberThe value for the highest grid line of the vertical axis.

Return

ScatterChartBuilder — 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. You can create a TextStyleBuilder object by calling Charts.newTextStyle().

Return

ScatterChartBuilder — This builder, useful for chaining.


setYAxisTitle(title)

Adds a title to the vertical axis. The title is centered and appears to the left of the value labels.

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

Parameters

NameTypeDescription
titleStringThe title for the Y-axis.

Return

ScatterChartBuilder — 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. You can create a TextStyleBuilder object by calling Charts.newTextStyle().

Return

ScatterChartBuilder — This builder, useful for chaining.