Animación de visualización de Google cuando el gráfico se carga por primera vez

Question

Me gustaría saber si puedo aplicar una animación a los gráficos la primera vez que se dibuja?

¿Y no solo cuando ocurre un cambio de datos?

¡Gracias!

Answer 1

El gráfico debe mostrarse antes de poder aplicar la animación que muestra transición de un estado a otro. Puede cambiar los datos de o cambiar las opciones de gráfico para crear la transición y su animación.

Para poder mostrar la animación en la primera vez, puede simplemente crear un gráfico vacío (sin datos), y luego agregar sus datos al gráfico, para mostrar la animación de datos.

var options = { 
    animation:{ 
    duration: 1000, 
    easing: 'out', 
    } 
}; 
var data = new google.visualization.DataTable(); 
data.addColumn('string', 'N'); 
data.addColumn('number', 'Value'); 
var chart = new google.visualization.ColumnChart... 
chart.draw(data, options); 
// Adding data 
data.addRow(['V', 200]); 

Answer 2

Pruebe algo como esto http://jsfiddle.net/h7mSQ/163/. La forma de hacerlo es dibujar el gráfico con valores cero y luego establecer los valores según sea necesario y dibujar el gráfico nuevamente. No se olvide de establecer un valor mínimo y máximo para (en este ejemplo) eje vertical.

function drawChart() { 
    var option = {title:"Yearly Coffee Consumption in our company", 
       width:600, height:400, 
       animation: {duration: 1000, easing: 'out',}, 
       vAxis: {title: "Cups of coffee", minValue:0, maxValue:500}, 
       hAxis: {title: "Year"}}; 
    var data = new google.visualization.DataTable();  
    data.addColumn('string', 'N'); 
    data.addColumn('number', 'Value'); 
    data.addRow(['2003', 0]); 
    data.addRow(['2004', 0]); 
    data.addRow(['2005', 0]); 
    // Create and draw the visualization. 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart')); 
    chart.draw(data, option); 
    data.setValue(0, 1, 400); 
    data.setValue(1, 1, 300); 
    data.setValue(2, 1, 400); 
    chart.draw(data, option); 

} 

google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart); 

Answer 3

RESPUESTA ACTUALIZADO

Google ha actualizado opciones de gráficos y añadió la opción para animar el cuadro de la primera vez que llama.

Así que lo único que tiene que hacer es psecify en las opciones por el estilo:

var options = { 
      animation: { 
       duration: 1500, 
       startup: true //This is the new option 
      } 
     }; 

Así que usted no tiene que cargar una tabla vacía en el beggining o hacer cualquier otro truco.

DEMO