How to make column chart start animation with Google Charts?

Question

I'm using Google Charts. It has an animation function but this one is not working for me. The documentation says that you have to add something like this:

    animation: {
       startup:true,
       duration: 2000,
       easing: 'in',
    },

to your options. But that is not working for me and I can't see why.

I made a codepen you can find here: http://codepen.io/anon/pen/ZWNrOg

HTML:

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="columnchart"></div>
<button type="button" onclick="drawChartColumn('zoom')">Zoom</button>
<button type="button" onclick="drawChartColumn('column1')">Column1</button>
<button type="button" onclick="drawChartColumn('column2')">Column2</button>

CSS

#columnchart {
  height: 300px;
  width: 500px;
}

Javascript

google.charts.load('43', {'packages':['bar', 'corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart(category) {
  drawChartColumn();
}

function drawChartColumn(category) {

  var data = google.visualization.arrayToDataTable([
    ['Jaar', 'Nummer1', 'Nummer2'],
    ['2015', 238000000, 9400000000],
    ['2016', 275000000, 9700000000],
    ['2017', 339000000, 9900000000],
    ['2018', 369000000, 10100000000],
    ['2019', 3690000, 101000000],
  ]);


  if(category == 'zoom'){
    var options = {
          isStacked: true,
        animation: {
           startup:true,
           duration: 2000,
           easing: 'in',
        },
        hAxis: {viewWindow: {min:3, max:4}},
        vAxis: {viewWindow: {min:0, max:3000000}}
    };
  }
  else {
    var options = {
          isStacked: true,
        animation: {
           startup:true,
           duration: 2000,
           easing: 'in',
        },
        hAxis: {viewWindow: {min:0, max:5}}
    };
  }

  var chart = new google.charts.Bar(document.getElementById('columnchart'));


  var view = new google.visualization.DataView(data);
  var viewColumns = [0];

     switch (category) {
        case 'column2':
          viewColumns.push(1);
          viewColumns.push(2);
          break;

         case 'column1':
          viewColumns.push(1);
          break;

        default:
          viewColumns.push(1);
      }

  view.setColumns(viewColumns);
  chart.draw(view, google.charts.Bar.convertOptions(options));
}

Google has example code but that doesn't work for me. I want to do 2 things:

zoom to a value with animation like this example: https://developers.google.com/chart/interactive/docs/animation#changing-the-view-window
change number of columns like this example: https://developers.google.com/chart/interactive/docs/animation#adding-and-removing-columns

Nboy Nboy · Accepted Answer · 2016-05-23T12:38:17

The package 'bar' does not support animation. You have to use the non material corecharts for animation like the 'corechart' you already have.

Instead of 'bar' use 'corechart only

google.charts.load('43', {'packages':['corechart']});

Instead of bar.chart use visualization.ColumnChart

var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));

And no converting is needed anymore, so use this

chart.draw(view, options);

Codepen: http://codepen.io/anon/pen/dMxVNY

How to make column chart start animation with Google Charts?

1 Answers