google chart animation doesn't work - animation

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.