CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Tristan Jade Awat
Tristan Jade Awat

Reputation: 275

Google Visualization Animation when chart loads for the first time

I would like to know if I can apply an animation to the charts on the first time it draws?

And not only when a change of data happens?

THanks!

Upvotes: 9

Views: 20925

Answers (3)

laaposto
laaposto

Reputation: 12213

UPDATED ANSWER

Google has updated chart options and added the option to animate the chart on the first time it draws.

So the only thing you have to do is psecify it in the options like that:

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

So you dont have to load an empty chart on the beggining or to do any other hack.

DEMO

Upvotes: 17

s0vet
s0vet

Reputation: 474

Try something like this http://jsfiddle.net/h7mSQ/163/. The way to do this is to render chart with zero values and then set values as required and draw chart again. Don't forget to set minimal and maximal value for (in this example) vertical axis.

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

Upvotes: 8

Guy
Guy

Reputation: 12891

The Chart should be rendered before you can apply your animation which is showing transition from one state to another. You can either change the data or change the chart options to create the transition and its animation.

To be able to show animation on the first time, you can simply create an empty (no data) chart, and then add your data to the chart, to show the data animation.

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]);

Upvotes: 8

Related Questions