Visualization: Scatter Chart (original) (raw)

Skip to main content

• Home

• Guides

• Reference

• Support

• Overview

• Hello, Charts!

  • Quickstart
  • Load the Charts Library
  • Prepare the Data
  • Customize the Chart
  • Draw the Chart
  • Draw Multiple Charts

• Chart Types

  • Chart Gallery
  • Annotation Charts
  • Area Charts
  • Bar Charts
  • Bubble Charts
  • Calendar Charts
  • Candlestick Charts
  • Column Charts
  • Combo Charts
  • Diff Charts
  • Donut Charts
  • Gantt Charts
  • Gauge Charts
  • GeoCharts
  • Histograms
  • Intervals
  • Line Charts
  • Maps
  • Org Charts
  • Pie Charts
  • Sankey Diagrams
  • Scatter Charts
  • Stepped Area Charts
  • Table Charts
  • Timelines
  • Tree Map Charts
  • Trendlines
  • VegaChart
  • Waterfall Charts
  • Word Trees
  • Miscellaneous Examples

• How to Draw Charts

  • Introduction
  • chart.draw()
  • ChartWrapper
  • Add Interactivity
  • How to Use Spreadsheets with Charts
  • How to Print PNGs

• Advanced Usage

  • How to Customize Charts
  • Axis Options
  • How to Create a New Chart Type
  • Crosshairs
  • Formatters
  • Lines
  • Overlays
  • Points
  • Tooltips
  • Development Tools

• Interacting with Charts

  • Events
  • Animation
  • Controls and Dashboards
  • Toolbars
  • ChartEditor

• Chart Data

  • DataTables and DataViews
  • Data Roles
  • Dates and Times
  • How to Connect Your Database
  • Ingest Chart Data from Other Sources
  • Ingest Data from Google Sheets
  • How to Implement a New Type of Datasource

Visualization: Scatter Chart

Stay organized with collections Save and categorize content based on your preferences.

Overview

Scatter charts plot points on a graph. When the user hovers over the points, tooltips are displayed with more information.

Google scatter charts are rendered within the browser usingSVG orVML depending on browser capabilities.

Example

Creating Material scatter charts

In 2014, Google announced guidelines intended to support a common look and feel across its properties and apps (such as Android apps) that run on Google platforms. We call this effort_Material Design_. We'll be providing "Material" versions of all our core charts; you're welcome to use them if you like how they look.

Creating a Material Scatter Chart is similar to creating what we'll now call a "Classic" Scatter Chart. You load the Google Visualization API (although with the 'scatter' package instead of the 'corechart' package), define your datatable, and then create an object (but of class google.charts.Scatter instead ofgoogle.visualization.ScatterChart).

Note: Material Charts will not work in old versions of Internet Explorer. (IE8 and earlier versions don't support SVG, which Material Charts require.)

Material Scatter Charts have many small improvements over Classic Scatter Charts, including variable opacity for legibility of overlapping points, an improved color palette, clearer label formatting, tighter default spacing, softer gridlines and titles (and the addition of subtitles).

  google.charts.load('current', {'packages':['scatter']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart () {

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Hours Studied');
    data.addColumn('number', 'Final');

    data.addRows([
      [0, 67], [1, 88], [2, 77],
      [3, 93], [4, 85], [5, 91],
      [6, 71], [7, 78], [8, 93],
      [9, 80], [10, 82],[0, 75],
      [5, 80], [3, 90], [1, 72],
      [5, 75], [6, 68], [7, 98],
      [3, 82], [9, 94], [2, 79],
      [2, 95], [2, 86], [3, 67],
      [4, 60], [2, 80], [6, 92],
      [2, 81], [8, 79], [9, 83],
      [3, 75], [1, 80], [3, 71],
      [3, 89], [4, 92], [5, 85],
      [6, 92], [7, 78], [6, 95],
      [3, 81], [0, 64], [4, 85],
      [2, 83], [3, 96], [4, 77],
      [5, 89], [4, 89], [7, 84],
      [4, 92], [9, 98]
    ]);

    var options = {
      width: 800,
      height: 500,
      chart: {
        title: 'Students\' Final Grades',
        subtitle: 'based on hours studied'
      },
      hAxis: {title: 'Hours Studied'},
      vAxis: {title: 'Grade'}
    };

    var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

    chart.draw(data, google.charts.Scatter.convertOptions(options));
  }

The Material Charts are in beta. The appearance and interactivity are largely final, but many of the options available in Classic Charts are not yet available in them. You can find a list of options that are not yet supported inthis issue.

Also, the way options are declared is not finalized, so if you are using any of the classic options, you must convert them to material options by replacing this line:

chart.draw(data, options);

...with this:

chart.draw(data, **google.charts.Scatter.convertOptions(options));**

Dual-Y charts

Sometimes you'll want to display two series in a scatter chart, with two independent y-axes: a left axis for one series, and a right axis for another:

Note that not only are our two y-axes labeled differently ("Final Exam Grade" versus "Hours Studied") but they each have their own independent scales and gridlines. If you want to customize this behavior, use the vAxis.gridlines options.

In the code below, the axes and series options together specify the dual-Y appearance of the chart. The series option specifies which axis to use for each ('final grade' and 'hours studied'; they needn't have any relation to the column names in the datatable). The axes option then makes this chart a dual-Y chart, placing the 'Final Exam Grade' axis on the left and the'Hours Studied' axis on the right.

  google.charts.load('current', {'packages':['corechart', 'scatter']});
  google.charts.setOnLoadCallback(drawStuff);

  function drawStuff() {

    var button = document.getElementById('change-chart');
    var chartDiv = document.getElementById('chart_div');

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Student ID');
    data.addColumn('number', 'Hours Studied');
    data.addColumn('number', 'Final');

    data.addRows([
      [0, 0, 67],  [1, 1, 88],   [2, 2, 77],
      [3, 3, 93],  [4, 4, 85],   [5, 5, 91],
      [6, 6, 71],  [7, 7, 78],   [8, 8, 93],
      [9, 9, 80],  [10, 10, 82], [11, 0, 75],
      [12, 5, 80], [13, 3, 90],  [14, 1, 72],
      [15, 5, 75], [16, 6, 68],  [17, 7, 98],
      [18, 3, 82], [19, 9, 94],  [20, 2, 79],
      [21, 2, 95], [22, 2, 86],  [23, 3, 67],
      [24, 4, 60], [25, 2, 80],  [26, 6, 92],
      [27, 2, 81], [28, 8, 79],  [29, 9, 83]
    ]);

    var materialOptions = {
      chart: {
        title: 'Students\' Final Grades',
        subtitle: 'based on hours studied'
      },
      width: 800,
      height: 500,
      series: {
        0: {axis: 'hours studied'},
        1: {axis: 'final grade'}
      },
      axes: {
        y: {
          'hours studied': {label: 'Hours Studied'},
          'final grade': {label: 'Final Exam Grade'}
        }
      }
    };

    var classicOptions = {
      width: 800,
      series: {
        0: {targetAxisIndex: 0},
        1: {targetAxisIndex: 1}
      },
      title: 'Students\' Final Grades - based on hours studied',

      vAxes: {
        // Adds titles to each axis.
        0: {title: 'Hours Studied'},
        1: {title: 'Final Exam Grade'}
      }
    };

    function drawMaterialChart() {
      var materialChart = new google.charts.Scatter(chartDiv);
      materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions));
      button.innerText = 'Change to Classic';
      button.onclick = drawClassicChart;
    }

    function drawClassicChart() {
      var classicChart = new google.visualization.ScatterChart(chartDiv);
      classicChart.draw(data, classicOptions);
      button.innerText = 'Change to Material';
      button.onclick = drawMaterialChart;
    }

    drawMaterialChart();
};

Top-X charts

Note: Top-X axes are available only for Material charts (i.e., those with packagescatter).

If you want to put the X-axis labels and title on the top of your chart rather than the bottom, you can do that in Material charts with the axes.x option:

  google.charts.load('current', {'packages':['scatter']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart () {

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Hours Studied');
    data.addColumn('number', 'Final');

    data.addRows([
      [0, 67],  [1, 88],  [2, 77],
      [3, 93],  [4, 85],  [5, 91],
      [6, 71],  [7, 78],  [8, 93],
      [9, 80],  [10, 82], [0, 75],
      [5, 80],  [3, 90],  [1, 72],
      [5, 75],  [6, 68],  [7, 98],
      [3, 82],  [9, 94],  [2, 79],
      [2, 95],  [2, 86],  [3, 67],
      [4, 60],  [2, 80],  [6, 92],
      [2, 81],  [8, 79],  [9, 83],
      [3, 75],  [1, 80],  [3, 71],
      [3, 89],  [4, 92],  [5, 85],
      [6, 92],  [7, 78],  [6, 95],
      [3, 81],  [0, 64],  [4, 85],
      [2, 83],  [3, 96],  [4, 77],
      [5, 89],  [4, 89],  [7, 84],
      [4, 92],  [9, 98]
    ]);

    var options = {
      width: 800,
      height: 500,
      chart: {
        title: 'Students\' Final Grades',
        subtitle: 'based on hours studied'
      },
      axes: {
        x: {
          0: {side: 'top'}
        }
      }
    };

    var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));

    chart.draw(data, google.charts.Scatter.convertOptions(options));
  }

Loading

The google.charts.load package name is "corechart", and the visualization's class name is google.visualization.ScatterChart.

google.charts.load("current", {packages: ["corechart"]});

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

For Material Scatter Charts, the google.charts.load package name is"scatter", and the visualization's class name is google.charts.Scatter.

google.charts.load("current", {packages: ["scatter"]});

var visualization = new google.charts.Scatter(container);

Data format

Rows: Each row in the table represents a set of data points with the same x-axis value.

Columns:

| | Column 0 | Column 1 | ... | Column N | | | ------------------------------------------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Purpose: | Data point X values | Series 1 Y values | ... | Series N Y values | | Data Type: | string, number, or date/datetime/timeofday | string, number, or date/datetime/timeofday | ... | string, number, or date/datetime/timeofday | | Role: | data | data | ... | data | | Optional column roles: | None | certainty emphasis scope tooltip | ... | certainty emphasis scope style tooltip |

To specify multiple series, specify two or more Y-axis columns, and specify Y values in only one Y column:

Configuration options

Methods

Events

For more information on how to use these events, seeBasic Interactivity,Handling Events, andFiring Events.

Data policy

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

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2024-07-10 UTC.