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 Macromedia web site
By: Google
Code it yourself on the Visualization Playground
(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="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.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>
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);
Date instances.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.
getState() and
displays the current state in a message box.)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);
| 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. |
| 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. |
| Name | Description | Properties |
|---|---|---|
| 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 |
All code and data are processed and rendered in the browser. No data is sent to any server.
This visualization has been localized for the following locales: ca, da, de, en, en_GB, en_IE, es, es_419, fi, fr, id, in, is, it, nl, no, pt, pt_BR, pt_PT, sv.
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.