Tuesday 15 July 2014

jquery - Animating pie chart with Google Visualization -


I'm experimenting with Google charts, I want a pie chart to animate 0% to 75% (below) See the given image). I am trying to get it through the Google chart. I am preparing two set data, one will start at 99%, the second will be at 1%, I want to invent and animate. I have achieved changing the values ​​through animation, but can not figure out how to make them live.

  & lt; Html & gt; & Lt; Top & gt; & Lt; Script type = "text / javascript" src = "https://www.google.com/jsapi" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" & gt; Google.load ('Visualization', '1.0', {'Package': ['Courchart']}); 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, 'Kha'); Data.setValue (1, 1, 99); Var option = {width: 500, height: 500, animation: {duration: 1000, easy: 'outside',}}; Var chart = new google.visualization.PieChart (document.getElementById ('chart_div')); Chart.draw (data, options); Function aniChart (d, o) {for (var i = 1; i & lt; 100; i ++) {data.setValue (0, 1, i); } (Var i = 99; i>; i--) {data.setValue (1, 1, i); } SetTimeout (function () {chart.draw (data, option);}, 1000); }; AniChart (); } & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "chart_div" & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;   

chart

< I believe the function is not supported by the Google charts API - see

I think if you use a different chart So it can be easy to tool like

No comments:

Post a Comment