Google Visualization: Animated Line Graph --incremental rather than all at once?

Question

Right now my code looks like this:

function drawChart() {

     var data = new google.visualization.DataTable();
      data.addColumn('string', 'Year');
      data.addColumn('number', 'Revenue');

      data.addRows([
        ['', 0],
        ['2008', 123],
        ['2010', 213],
        ['2012', 654]
      ]);

    var options = {
      hAxis: {textStyle:{color: '#FFF'}},  
      vAxis: { baseline:0, baselineColor: '#FFF', gridlineColor: '#FFF',  textStyle:{color: '#FFF'} },
      backgroundColor: 'transparent',
      legend: { position: 'none' },
      colors: ['#FFF'],
      textStyle:{color: '#FFF'},
      pointSize: 10,
      series: {
            0: { pointShape: 'star'}
        },
      animation: {startup: true, duration: 5000, easing: 'linear',}

    };



    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

chart.draw(data, options);
  }

What I want is for my animation to incrementally reveal each row. How do I go about doing this?

Any help would be greatly appreciated.

Answer 1

the chart must be drawn for animation to occur

hold on to the data and only draw one row at a time

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var rawData = [
      [0, 0],
      [1, 2],
      [2, 1],
      [3, 4],
      [4, 2],
      [5, 8],
      [6, 3],
      [7, 16],
      [8, 4],
      [9, 32]
    ];

    var data = new google.visualization.DataTable({
      "cols": [
        {"id":"","label":"X","type":"number"},
        {"id":"","label":"Y","type":"number"}
      ]
    });

    var options = {
      pointSize: 4,
      animation:{
        startup: true,
        duration: 600,
        easing: 'in'
      },
      legend: 'none',
      hAxis: {
        viewWindow: {
          min: 0,
          max: 9
        }
      },
      vAxis: {
        viewWindow: {
          min: 0,
          max: 32
        }
      }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

    drawChart();
    setInterval(drawChart, 1200);

    var rowIndex = 0;
    function drawChart() {
      if (rowIndex < rawData.length) {
        data.addRow(rawData[rowIndex++]);
        chart.draw(data, options);
      }
    }
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

EDIT

for smoother action, wait for the chart's 'ready' event before drawing again.

see following working snippet...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var rawData = [
    [0, 0],
    [1, 2],
    [2, 1],
    [3, 4],
    [4, 2],
    [5, 8],
    [6, 3],
    [7, 16],
    [8, 4],
    [9, 32]
  ];

  var data = new google.visualization.DataTable({
    "cols": [
      {"id":"","label":"X","type":"number"},
      {"id":"","label":"Y","type":"number"}
    ]
  });

  var options = {
    pointSize: 4,
    animation:{
      startup: true,
      duration: 600,
      easing: 'in'
    },
    legend: 'none',
    hAxis: {
      viewWindow: {
        min: 0,
        max: 9
      }
    },
    vAxis: {
      viewWindow: {
        min: 0,
        max: 32
      }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  google.visualization.events.addListener(chart, 'ready', function () {
    drawChart();
  });

  var rowIndex = 0;
  drawChart();
  function drawChart() {
    if (rowIndex < rawData.length) {
      data.addRow(rawData[rowIndex++]);
      chart.draw(data, options);
    }
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>