English | Site Directory

Google Visualization API

Visualization: Motion Chart

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

Overview

A dynamic chart to explore several indicators over time. The chart is rendered within the browser using Flash.

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:["motionchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addRows(6);
        data.addColumn('string', 'Department');
        data.addColumn('number', 'Year');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.setValue(0, 0, 'Dogs');
        data.setValue(0, 1, 1995);
        data.setValue(0, 2, 1000);
        data.setValue(0, 3, 300);
        data.setValue(1, 0, 'Cats');
        data.setValue(1, 1, 1995);
        data.setValue(1, 2, 950);
        data.setValue(1, 3, 200);
        data.setValue(2, 0, 'Dogs');
        data.setValue(2, 1, 1996);
        data.setValue(2, 2, 1200);
        data.setValue(2, 3, 400);
        data.setValue(3, 0, 'Cats');
        data.setValue(3, 1, 1996);
        data.setValue(3, 2, 900);
        data.setValue(3, 3, 150);
        data.setValue(4, 0, 'Dogs');
        data.setValue(4, 1, 1997);
        data.setValue(4, 2, 1250);
        data.setValue(4, 3, 800);
        data.setValue(5, 0, 'Cats');
        data.setValue(5, 1, 1997);
        data.setValue(5, 2, 200);
        data.setValue(5, 3, 660);

        var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 600, height:300});
      }
    </script>
  </head>

  <body>
    <div id="chart_div" style="width: 600px; height: 300px;"></div>
  </body>
</html>

Note that this chart does not work when loading the HTML from a local file. It works only when loading the HTML from a web server.

Loading

The google.load package name is "motionchart" 

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

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

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

Data Format

  • The first column should be a string and contain a name of a displayed category.
  • The second column should be a number or a date. Numbers are considered as years.
  • The third column should be a number that will be used to draw the X axis.
  • The fourth column should be a number that will be used to draw the Y axis.
  • Optionally, you can add two numeric columns, the first will determine the color of each bubble, and the second will determine the size of each bubble.

Configuration Options

Name Type Default Description
height number 300 Height of the chart in pixels.
width number 500 Width of the chart in pixels.

Methods

Method Return Type Description
draw(data, options) none Draws the chart.

Events

No triggered events.

Data Policy

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