tipos sankey haxis google examples columnchart chart jquery animation charts visualization

jquery - sankey - haxis google chart



Animar el gráfico circular con Google Visualization (3)

Creo que la función no es compatible con la API de Google api - consulte Modificaciones compatibles

Creo que puede ser más fácil si usa una herramienta de gráfico diferente como esta http://bl.ocks.org/mbostock/1346410

Estoy experimentando con Google charts. Quiero un gráfico circular para animar de 0% a 75% (ver la imagen a continuación). Estoy intentando lograr esto a través de tablas de Google. Estoy creando dos conjuntos de datos, uno comenzará al 99% y el otro al 1%. Quiero invertir y animar estos. He logrado cambiar los valores a través de la animación, pero no logro encontrar la manera de animarlos.

<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>


<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>


Resolviendo el problema original con el pulcro ciclo de animación de @Muhammad.

Valores iniciales:

  • Trabajo: 0%
  • Comer: 100%

El ciclo aumenta el valor de 1 unidad y dibuja el gráfico cada 30 milisegundos.

El ciclo se detiene cuando se alcanza Work = 75%.

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>