Visualization: Motion Chart

  1. Overview
  2. Example
  3. Loading
  4. Setting Initial State
  5. Data Format
  6. Configuration Options
  7. Methods
  8. Events
  9. Data Policy
  10. Notes

Overview

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

Note for Developers: Because of Flash security settings, this (and all Flash-based visualizations) might not work correctly when accessed from a file location in the browser (e.g., file:///c:/webhost/myhost/myviz.html) rather than from a web server URL (e.g., http://www.myhost.com/myviz.html). This is typically a testing issue only. You can overcome this issue as described on the Adobe web site.

Example

(Note that the following code will not work when loaded as a local file; it must be loaded from a web server.)

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["motionchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Fruit');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addColumn('string', 'Location');
        data.addRows([
          ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
          ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
          ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
          ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
          ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
          ['Bananas', new Date (1989,6,1), 788,  617, 'West']
        ]);

        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>

Loading

The google.charts.load package name is "motionchart".

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

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

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

Data Format

  • The first column must be of type 'string' and contain the entity names (e.g., "Apples", "Oranges", "Bananas" in the example above).
  • The second column must contain time values. Time can be expressed in any of the following formats:
    • Year - Column type: 'number'. Example: 2008.
    • Month, day and year - Column type: 'date'; values should be javascript Date instances.
    • Week number- Column type: 'string'; values should use the pattern YYYYWww, which conforms to ISO 8601. Example: '2008W03'.
    • Quarter - Column type: 'string'; the values should have the pattern YYYYQq, which conforms to ISO 8601. Example: '2008Q3'.
  • Subsequent columns can be of type 'number' or 'string'. Number columns will show up in the dropdown menus for X, Y, Color and Size axes. String columns will only appear in the dropdown menu for Color. See the example above.

Setting Initial State

You can specify that the motion chart start with a specific state: that is, a set of selected entities and view customizations. To do this, you'll need to first create and display the chart, then make any state changes that you want the chart to show (select values, change settings, etc), then export these settings as a string, and finally use this string in your code, assigning it to the "state" option. The next two sections describe how to export and then use the state code.

  1. Open a working chart and set the settings that you'd like to capture. Settings you can specify include opacity levels, zooming, and log vs linear scaling.
  2. Open the Settings panel by clicking the wrench symbol in the lower right corner of the chart.
  3. Click the Advanced link in the lower left corner to add the Advanced panel to the set.
  4. Expand the Advanced panel and copy the contents of the State text box to your clipboard. (Note: instead of using the menu, described in steps 2—4, you could insert a button on your page that calls getState() and displays the current state in a message box.)
  5. Assign the state string that you copied in the previous step to the "state" options parameter in your code, as shown here. When passed into the draw() method, the chart will be initialized to the state specified on startup.
var options = {};
options['state'] =
'{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_NOTHING","playDuration":15,"iconType":"BUBBLE","sizeOption":"_NOTHING","xZoomedDataMin":null,"xZoomedIn":false,"duration":{"multiplier":1,"timeUnit":"none"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_NOTHING","nonSelectedAlpha":0.4,"dimensions":{"iconDimensions":[]},"yZoomedIn":false,"yAxisOption":"_NOTHING","yLambda":1,"yZoomedDataMax":null,"showTrails":true,"xZoomedDataMax":null};';

options['width'] = 600;
options['height'] = 400;
chart.draw(data, options);

Configuration Options

Name Type Default Description
height number 300 Height of the chart in pixels.
width number 500 Width of the chart in pixels.
state string none An initial display state for the chart. This is a serialized JSON object that describes zoom level, selected dimensions, selected bubbles/entities, and other state descriptions. See Setting Initial State to learn how to set this.
showChartButtons boolean true false hides the buttons that control the chart type (bubbles / lines / columns) at top right corner.
showHeader boolean true false hides the title label of the entities (derived from the label of the first column in the data table).
showSelectListComponent boolean true false hides the list of visible entities.
showSidePanel boolean true false hides the right hand panel.
showXMetricPicker boolean true false hides the metric picker for x.
showYMetricPicker boolean true false hides the metric picker for y.
showXScalePicker boolean true false hides the scale picker for x.
showYScalePicker boolean true false hides the scale picker for y.
showAdvancedPanel boolean true false disables the options compartment in the settings panel.

Methods

Method Return Type Description
draw(data, options) none Draws the chart with the options provided.
getState() string Returns the current state of the motionchart, serialized to a JSON string. To assign this state to the chart, assign this string to the state option in the draw() method. This is often used to specify a custom chart state on startup, instead of using the default state.

Events

Name Description Properties
error Fired when an error occurs when attempting to render the chart. id, message
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
statechange The user has interacted with the chart in some way. Call getState() to learn the current state of the chart. None

Data Policy

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

Notes

Because of Flash security settings, this (and all Flash-based visualizations) might not work correctly when accessed from a file location in the browser (e.g., file:///c:/webhost/myhost/myviz.html) rather than from a web server URL (e.g., http://www.myhost.com/myviz.html). This is typically a testing issue only. You can overcome this issue as described on the Macromedia web site.