TechyDude TechyDude - 11 months ago 82
jQuery Question

Animating pie chart with Google Visualization

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.

<script type="text/javascript" src=""></script>
<script type="text/javascript">

google.load('visualization', '1.0', {'packages':['corechart']});


function drawChart() {

var data = new google.visualization.DataTable();
data.addColumn('string', 'text');
data.addColumn('number', 'number');

data.setValue(0, 0, 'Work');
data.setValue(0, 1, 1);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 99);

var options = {
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);
chart.draw(data, options);
}, 1000);




<div id="chart_div"></div>


Answer Source

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