Visualization: Motion Chart

Overview
Example
Loading
Setting Initial State
Data Format
Configuration Options
Methods
Events
Data Policy
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.

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.
Open the Settings panel by clicking the wrench symbol in the lower right corner of the chart.
Click the Advanced link in the lower left corner to add the Advanced panel to the set.
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.)
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.