My favorites | English | Sign in

Google Visualization API

Visualization: Scatter Chart

  1. Overview
  2. Example
  3. Loading
  4. Data Format
  5. Configuration Options
  6. Methods
  7. Events
  8. Data Policy

Overview

A scatter chart that is rendered within the browser using SVG or VML. Displays tips when clicking on points.

A scatter chart is used to map correlation between sets of numbers.

By: Google

Example

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["scatterchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Age');
        data.addColumn('number', 'Weight');
        data.addRows(6);
        data.setValue(0, 0, 8);
        data.setValue(0, 1, 12);
        data.setValue(1, 0, 4);
        data.setValue(1, 1, 5.5);
        data.setValue(2, 0, 11);
        data.setValue(2, 1, 14);
        data.setValue(3, 0, 4);
        data.setValue(3, 1, 5);
        data.setValue(4, 0, 3);
        data.setValue(4, 1, 3.5);
        data.setValue(5, 0, 6.5);
        data.setValue(5, 1, 7);

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, titleX: 'Age', titleY: 'Weight', legend: 'none', pointSize: 5});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Get started quickly with an Interactive Code Sample you can edit and save.

Loading

The google.load package name is "scatterchart" 

  google.load("visualization", "1", {packages: ["scatterchart"]});

The visualization's class name is google.visualization.ScatterChart 

  var visualization = new google.visualization.ScatterChart(container);

Data Format

Two or more columns are required, all must be numeric. The values in the first column are used for the X-axis. The values in following columns are used for the Y-axis. Each column is displayed with a separate color.

The minimum and maximum numbers shown on the X axis are the minimum and maximum X values in the data table. To force extra space to be shown below or above these values, add a row with an X value below the minimum or above the maximum data value, and do not specify a Y value in the row. You can add a row for minimum, maximum, or both values this way.

Configuration Options

Name Type Default Description
axisColor string or Object default color The color of the axis. Possible values are as those of the backgroundColor configuration option.
axisBackgroundColor string or Object default color The border around axis background. Possible values are as those of the backgroundColor configuration option.
axisFontSize number automatic Font size of the chart axis text, in pixels.
backgroundColor string or Object default color The background color for the main area of the chart. May be one of the following options:
  • A string with color supported by HTML, for example 'red' or '#00cc00'
  • An object with properties stroke fill and strokeSize. stroke and fill should be a string with a color. strokeSize is a number. For example: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}. To use just fill, without a stroke, use stroke:null, strokeSize: 0.
borderColor string or Object default color The border around chart elements. Possible values are as those of the backgroundColor configuration option.
colors Array of strings Default colors The colors to use for the chart elements. An array of strings. Each element is a string that is a color supported by HTML, for example 'red' or '#00cc00'.
enableTooltip boolean true If set to true, tooltips are shown when the user clicks on a data point.
focusBorderColor string or Object default color The border around chart elements that are in focus (pointed by the mouse). Possible values are as those of the backgroundColor configuration option.
height number Container's height Height of the chart in pixels.
legend string 'right' Position and type of legend. Can be one of the following:
  • 'right' - To the right of the chart.
  • 'left' - To the left of the chart.
  • 'top' - Above the chart.
  • 'bottom' - Below the chart.
  • 'none' - No legend is displayed.
legendBackgroundColor string or Object default color The background color for the legend area of the chart. Possible values are as those of the backgroundColor configuration option.
legendFontSize number automatic The size of the legend font, in pixels.
legendTextColor string or Object default color The color for the text entries of the legend. Possible values are as those of the backgroundColor configuration option.
lineSize number 0 Line width in pixels. Use positive values to show a line between all points of the same data column.
max number automatic Specifies the highest Y axis grid line. The actual grid line will be the greater of two values: the max option value, or the highest data value, rounded up to the next higher grid mark.
min number automatic Specifies the lowest Y axis grid line. The actual grid line will be the lower of two values: the min option value, or the lowest data value, rounded down to the next lower grid mark.
pointSize number 3 Size of displayed points in pixels.
title string no title Text to display above the chart.
titleX string no title Text to display below the horizontal axis.
titleY string no title Text to display by the vertical axis.
titleColor string or Object default color The color for the chart's title. Possible values are as those of the backgroundColor configuration option.
titleFontSize number automatic The font size for the chart title, in pixels.
width number Container's width Width of the chart in pixels.

Methods

Method Return Type Description
draw(data, options) none Draws the chart.
getSelection() Array of selection elements Standard getSelection() implementation. Selected elements are column and cell elements. Only one column or cell can be selected at a time by the user.
setSelection() none Standard setSelection() implementation, but supports selection of only one element. Treats every selection entry as a column or cell selection. Note that the label column and the first numeric column (the x axis value column) cannot be selected.

Events

Name Description Properties
onmouseover Fired when the user mouses over a point, and passes in the row and column indexes of the corresponding cell. row, column
onmouseout Fired when the user mouses away from a point, and passes in the row and column indexes of the corresponding cell. row, column
ready The chart is ready for external method calls. If you want to interact with the chart, and call methods after you draw it, you should set up a listener for this event before you call the draw method, and call them only after the event was fired None
select When the user clicks on a legend entry, the corresponding column in the data table is selected; when the user clicks on a point, the corresponding cell in the data table is selected (the cell with the y-axis value). The visualization then fires this event. None

Data Policy

All code and data are processed and rendered in the browser. No data is sent to any server.