# Visualization: Motion Chart

1. [Overview](https://developers.google.com/chart/interactive/docs/gallery/motionchart#Overview)
2. [Example](https://developers.google.com/chart/interactive/docs/gallery/motionchart#Example)
3. [Loading](https://developers.google.com/chart/interactive/docs/gallery/motionchart#Loading)
4. [Setting Initial State](https://developers.google.com/chart/interactive/docs/gallery/motionchart#Motion_Chart_initial_state)
5. [Data Format](https://developers.google.com/chart/interactive/docs/gallery/motionchart#Data_Format)
6. [Configuration Options](https://developers.google.com/chart/interactive/docs/gallery/motionchart#Configuration_Options)
7. [Methods](https://developers.google.com/chart/interactive/docs/gallery/motionchart#Methods)
8. [Events](https://developers.google.com/chart/interactive/docs/gallery/motionchart#Events)
9. [Data Policy](https://developers.google.com/chart/interactive/docs/gallery/motionchart#Data_Policy)
10. [Notes](https://developers.google.com/chart/interactive/docs/gallery/motionchart#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](http://kb2.adobe.com/cps/093/4c093f20.html).

## Example

\<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"\>\</script\> \<script type="text/javascript"\> google.charts.load('current', {'packages':\['motionchart'\]}); \</script\> \<div id="chart_div" style="width: 600px; height: 300px;"\>\</div\> 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}); }

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

```html
<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](http://en.wikipedia.org/wiki/ISO_8601). Example: '2008W03'.
  - *Quarter* - Column type: 'string'; the values should have the pattern YYYYQq, which conforms to [ISO
    8601](http://en.wikipedia.org/wiki/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()`](https://developers.google.com/chart/interactive/docs/gallery/motionchart#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](https://developers.google.com/chart/interactive/docs/gallery/motionchart#Motion_Chart_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](https://developers.google.com/chart/interactive/docs/gallery/motionchart#Motion_Chart_initial_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()`](https://developers.google.com/chart/interactive/docs/gallery/motionchart#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](http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager02.html).