Menu
I am experimenting with google charts. I want a pie chart to animate from 0% to 75% (see the image below). I am attempting to achieve this through google charts. I am creating two sets of data, one will start at 99%, the other at 1%. I want to invert and animate these. I have achieved changing the values through animation, but cannot figure out how to get them to animate.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'text');
data.addColumn('number', 'number');
data.addRows(2);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 1);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 99);
var options = {
width:500,
height:500,
animation: {duration: 1000, easing: 'out',}
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
function aniChart(d,o){
for (var i=1; i<100; i++) {
data.setValue(0, 1, i);
}
for (var i=99; i>00; i--) {
data.setValue(1, 1, i);
}
setTimeout(function(){
chart.draw(data, options);
}, 1000);
};
aniChart();
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
498
Click the text or image you want to animate. Then click Insert > Animation. Click on Select an object to animate, scroll down and choose the animation you want to use. Then on the scroll underneath select whether you want your object to animate On click, After previous or With previous.
Google charts can animate smoothly in one of two ways, either on startup when you first draw the chart, or when you redraw a chart after making a change in data or options.
I believe that function is not supported by Google Charts api - refer to Supported Modifications
I think it may be easier if you use a different chart tool such as this http://bl.ocks.org/mbostock/1346410
101
Solving the original problem with the neat @Muhammad animation loop.
Initial values:
The loop increases the value 1 unit and draw the pie every 30 milliseconds.
The loop stops when Work=75% is reached.
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'text');
data.addColumn('number', 'number');
data.addRows(2);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 0.0);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 100.0);
var options = {
width:500,
height:500
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
// initial value
var percent = 0;
// start the animation loop
var handler = setInterval(function(){
// values increment
percent += 1;
// apply new values
data.setValue(0, 1, percent);
data.setValue(1, 1, 100 - percent);
// update the pie
chart.draw(data, options);
// check if we have reached the desired value
if (percent > 74)
// stop the loop
clearInterval(handler);
}, 30);
}<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<script>
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
var counter = 0;
var handler = setInterval(function(){
counter = counter + 0.1
options = {
title: 'My Daily Activities',
slices: { 1: {offset: counter},
3: {offset: counter},
5: {offset: counter},
}
};
chart.draw(data, options);
if (counter > 0.3) clearInterval(handler);
}, 200);
}
</script>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
