google chart animation doesn't work

Question

I am trying to make animations work in google charts. For some reason animation doesn't trigger.

Its pretty simple code. I would appreciate any help.

      google.setOnLoadCallback(drawChart);
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);
      function drawChart() {



        var options = {
      width: 400,
      height: 240,
      animation:{
        'duration': 5000,
        'easing': 'out',
      },
      vAxis: {minValue:0, maxValue:100}
    };
        var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }

var ch=0;
    function change(){
        if(ch==0){
                  data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     1],
          ['Eat',      20],
          ['Commute',  20],
          ['Watch TV', 20],
          ['Sleep',    17]
        ]);
            ch=1;
        }
        else if(ch==1){
            data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     10],
          ['Eat',      2],
          ['Commute',  12],
          ['Watch TV', 24],
          ['Sleep',    47]
        ]);
            ch=0;
        }
        drawChart();
    }

full code is on below JSFIddle

https://jsfiddle.net/hjnufh0o/

Answer 1

You're recreating the chart object everytime you call drawChart() which has the effect of destroying the existing chart and building a new one - so there is nothing to animate between.

https://jsfiddle.net/2foeopyv/

I've pulled out the declarations for chart and options from the drawChart() section, so its now updating the chart rather than trying to recreate it.