How to animate AreaCharts???
104 views
Skip to first unread message
mrishadali
Jun 20, 2012, 10:43:58 AM6/20/12
to google-visua...@googlegroups.com
Hi All,
Is there any example to animate AreaCharts?
The option for animation is available so there should ba a way to animate it.
I tried simple animation but doesn't seem to work.
Thanks in advance...
This is the example.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['DateTime', 'val1', 'val2','val3','val4'],
['Wed Jun 20 08:55:49 BST 2012',38.2,21.3,5.02,0.12],
['Wed Jun 20 09:00:12 BST 2012',39.6,21.5,5.32,0.12],
['Wed Jun 20 09:01:58 BST 2012',39.6,21.5,5.32,0.12],
['Wed Jun 20 09:13:45 BST 2012',39.6,21.5,5.32,0.12],
['Wed Jun 20 09:15:31 BST 2012',39.9,21.9,5.45,0.11],
['Wed Jun 20 09:34:11 BST 2012',44.5,25.1,5.77,0.12],
['Wed Jun 20 09:46:27 BST 2012',45.8,23.1,4.84,0.09],
['Wed Jun 20 09:59:54 BST 2012',40.7,19.4,3.81,0.07],
['Wed Jun 20 10:15:35 BST 2012',27.9,14.8,3.8,0.08],
['Wed Jun 20 10:30:36 BST 2012',33.7,15.4,3.47,0.07],
['Wed Jun 20 13:02:54 BST 2012',39.7,18.3,3.06,0.06],
['Wed Jun 20 13:33:09 BST 2012',23.8,13.7,2.88,0.05],
['Wed Jun 20 13:45:42 BST 2012',24.7,15.0,3.12,0.06], ]);
var options = {animation:{duration:1000,easing:'out'},
title: 'Test Area Chart',
hAxis: {title: 'DateTime', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
asgallant
Jun 20, 2012, 11:35:32 PM6/20/12
to google-visua...@googlegroups.com
You have to draw the chart, change the data in some manner, and then redraw the chart with the new data. See this as an example:
http://jsfiddle.net/asgallant/8xYXA/
Reply all
Reply to author
Forward
0 new messages