Google chart animation loses visibility when chart data changes

Question

I'm having trouble getting Google Chart animations to work properly. I think the problem is that the chart keeps redrawing instead of just updating the data, but based on Google's sample code and my limited knowledge of JavaScript, I'm not sure how to fix this. I don't want to include a button to update the chart because the chart will eventually dynamically update data from the data source. How do I update my chart to properly animate data changes? Reference: https://developers.google.com/chart/interactive/d

P粉301523298 · Answer

In order for a chart to animate from one dataset to the next, you need to keep a reference to the same chart instead of creating a new chart each time you draw.

Please refer to the following examples...

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(initChart);
var chart;

function initChart() {
  chart = new google.visualization.ColumnChart(document.getElementById('pizzaChart'));
  drawChart();
}

function drawChart() {

  var mushroomData = Math.floor(Math.random() * 11);
  document.getElementById("logger").innerHTML = mushroomData;

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['Mushrooms', mushroomData],
    ['Onions', 1],
    ['Olives', 1],
    ['Zucchini', 1],
    ['Pepperoni', 2]
  ]);

  var options = {
    title: 'How Much Pizza I Ate Last Night',
    width: '100%',
    animation: {duration: 1000, easing: 'out'}
  };

  chart.draw(data, options);
}

setInterval(drawChart, 1000);

Note: Google pie charts do not support animation effects.