©2008 Google -
Code Home -
Site Terms of Service -
Privacy Policy -
Site Directory
Google Code offered in:
中文 -
English -
Português -
Pусский -
Español -
日本語
A dynamic chart to explore several indicators over time. The chart is rendered within the browser using Flash.
By: Google
<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', 'Department');
data.addColumn('number', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.setValue(0, 0, 'Dogs');
data.setValue(0, 1, 1995);
data.setValue(0, 2, 1000);
data.setValue(0, 3, 300);
data.setValue(1, 0, 'Cats');
data.setValue(1, 1, 1995);
data.setValue(1, 2, 950);
data.setValue(1, 3, 200);
data.setValue(2, 0, 'Dogs');
data.setValue(2, 1, 1996);
data.setValue(2, 2, 1200);
data.setValue(2, 3, 400);
data.setValue(3, 0, 'Cats');
data.setValue(3, 1, 1996);
data.setValue(3, 2, 900);
data.setValue(3, 3, 150);
data.setValue(4, 0, 'Dogs');
data.setValue(4, 1, 1997);
data.setValue(4, 2, 1250);
data.setValue(4, 3, 800);
data.setValue(5, 0, 'Cats');
data.setValue(5, 1, 1997);
data.setValue(5, 2, 200);
data.setValue(5, 3, 660);
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>
Note that this chart does not work when loading the HTML from a local file. It works only when loading the HTML from a web server.
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);
| Name | Type | Default | Description |
|---|---|---|---|
| height | number | 300 | Height of the chart in pixels. |
| width | number | 500 | Width of the chart in pixels. |
| Method | Return Type | Description |
|---|---|---|
draw(data, options) |
none | Draws the chart. |
No triggered events.
All code and data are processed and rendered in the browser. No data is sent to any server.