How do I animate Google charts?

Question

In script tags i added following code and i am unable to animate it. kindly suugest

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

    var options = {
      title: 'Company Performance',
       animation: {
          duration: 1000,
          easing: 'out'
      },
      vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}, minValue:0, maxValue:1000}
    };
    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

chart is loading but i am unable to animate it. animating at the time of loading

score 9 · Answer 1 · answered May 12 '15 at 13:53

9

To animate on load, add startup: true to your animation options (cf. documentation). Full code:

           animation: {
          duration: 1000,
          easing: 'out',
          startup: true
      }

answered May 12 '15 at 13:53

speedracr

385
3
5

I know this is old, but, this worked great for me, and it seems to be the official way to do it. – Feign Nov 18 '15 at 15:44

score 2 · Answer 2 · edited Feb 06 '14 at 14:46

You will see animation when you change something in your data. Change your code to something like this:

    ...
    chart.draw(data, options);

    setTimeout(function() {
        data.setValue(0, 2, 1000);
        chart.draw(data, options);
    }, 3000);

and expenses value 400 will be changed to 1000 with animation.

Check this document about animation for some hints.

Update: It seems that there is no animation on load but you can fake it like this loading all zeros at the beggining and then redrawing with real data:

var data = google.visualization.arrayToDataTable([
  ['Year', 'Sales', 'Expenses'],
  ['2004',  0,      0],
  ['2005',  0,      0],
  ['2006',  0,      0],
  ['2007',  0,      0]
]);

var options = {
  title: 'Company Performance',
   animation: {
      duration: 1000,
      easing: 'out'
  },
  vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}, minValue:0, maxValue:1000}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);

var data = google.visualization.arrayToDataTable([
  ['Year', 'Sales', 'Expenses'],
  ['2004',  1000,      400],
  ['2005',  1170,      460],
  ['2006',  660,       1120],
  ['2007',  1030,      540]
]);
chart.draw(data, options);

Please, check [supported modification](https://developers.google.com/chart/interactive/docs/animation#Supported_Modifications). It seems that there is no animation on load — Anto Jurković, Feb 05 '14 at 13:52

score 0 · Answer 3 · answered Jun 09 '16 at 13:46

0

USE THIS

var options = 
 {
   title: 'Total Sale Today',
   animation:
           {
               "startup": true,
               duration: 2000,
               easing: 'out'
           }
 }

answered Jun 09 '16 at 13:46

Deepak swain

3,380
1
30
26

Could you elaborate? – Kmeixner Jun 09 '16 at 14:05

score 0 · Answer 4 · edited Jun 09 '17 at 05:42

var data = google.visualization.arrayToDataTable( chartArr );

var options = {
  sliceVisibilityThreshold: .0,
  pieHole: 0.3,
  legend: 'none',
  pieSliceText: 'label',
  height:500,
  width : "100%",
  is3D: true,
  animation:{
    duration: 5000,
    easing: 'out',
    startup: true //This is the new option
  },
};

var chart = new google.visualization.PieChart(document.getElementById('ethnicityChartInq'));

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

score 0 · Answer 5 · answered Sep 04 '20 at 10:53

You can animate it with css animations manually like this codepen :

Html:

<!-- adding class for animation -->
<div id="barchart_material" class="animated-chart animated-chart-start"></div>

Js:

// removing the class after a short delay
google.visualization.events.addListener(chart, 'ready', () => {
  setTimeout(() => {
    document.getElementById('barchart_material').classList.remove('animated-chart-start')
  }, 100)
});

Css:

.animated-chart g:nth-of-type(3) {
  transition: 1s;
  transform: scaleX(1);
    transform-origin: 70px 0;
}
.animated-chart.animated-chart-start g:nth-of-type(3) {
  transform: scaleX(0);
}

Run it live | React version

How do I animate Google charts?

5 Answers5