6

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>

chart

Improve this question
3
  • you want it to go blue/red/blue/red...and so on as the first iteration? Commented Jun 25, 2013 at 21:18
  • Ideally it would be white first, then the color would animate like a clock hand to the desired percent. Commented Jun 26, 2013 at 0:52
  • aniChart function is wrong. You are looping through all the values and then making a final single delayed draw call. There is no animation loop. Commented Nov 3, 2016 at 15:15

3 Answers 3

Reset to default
5

Solving the original problem with the neat @Muhammad animation loop.

Initial values:

  • Work: 0%
  • Eat: 100%

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

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

Improve this answer

1 Comment

chart example is excellent. It relies on d3 library which is also excellent. It requires a browser that supports SVG. Perfect for mobile applications. You can animate, add touch events, alter the pie wedges interactively with some JS.
2 
<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>

Improve this answer

2 Comments

put this element in body tag <div id="piechart" style="width: 900px; height: 500px;"></div> and <script type="text/javascript" src="google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script> in head tag
While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.