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
(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.addRows(6);
data.addColumn('string', 'Fruit');
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addColumn('string', 'Location');
data.setValue(0, 0, 'Apples');
data.setValue(0, 1, new Date (1988,0,1));
data.setValue(0, 2, 1000);
data.setValue(0, 3, 300);
data.setValue(0, 4, 'East');
data.setValue(1, 0, 'Oranges');
data.setValue(1, 1, new Date (1988,0,1));
data.setValue(1, 2, 950);
data.setValue(1, 3, 200);
data.setValue(1, 4, 'West');
data.setValue(2, 0, 'Bananas');
data.setValue(2, 1, new Date (1988,0,1));
data.setValue(2, 2, 300);
data.setValue(2, 3, 250);
data.setValue(2, 4, 'West');
data.setValue(3, 0, 'Apples');
data.setValue(3, 1, new Date(1988,1,1));
data.setValue(3, 2, 1200);
data.setValue(3, 3, 400);
data.setValue(3, 4, "East");
data.setValue(4, 0, 'Oranges');
data.setValue(4, 1, new Date(1988,1,1));
data.setValue(4, 2, 900);
data.setValue(4, 3, 150);
data.setValue(4, 4, "West");
data.setValue(5, 0, 'Bananas');
data.setValue(5, 1, new Date(1988,1,1));
data.setValue(5, 2, 788);
data.setValue(5, 3, 617);
data.setValue(5, 4, "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>
Get started quickly with an Interactive Code Sample you can edit and save.
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.
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. See Setting Initial State to learn how to set this. |
| showSelectListComponent | string | true | false hides the list of visible entities. |
| showSidePanel | string | true | false hides the right hand panel. |
| showXMetricPicker | string | true | false hides the metric picker for x. |
| showYMetricPicker | string | true | false hides the metric picker for y. |
| showXScalePicker | string | true | false hides the scale picker for x. |
| showYScalePicker | string | true | false hides the scale picker for y. |
| showAdvancedPanel | string | 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.
This string can be used as an initial state when displaying the chart
by calling draw(). |
| 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 |
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.