Animate New data in Google line charts - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

  1. HOME
  2. Javascript
  3. Google Chart
  4. Line Chart

Description

Animate New data in Google line charts

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <body translate="no"> 
      <button id="addData">Add more data!</button> 
      <div id="chart_div"></div> 
      <script src="https://www.gstatic.com/charts/loader.js"></script> 
      <script>
      function drawChart() {//from w  w  w.j  a  v  a2  s. co  m
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'year');
  data.addColumn('number', 'Value');
  data.addRows([
    ['2010', 85],
    ['2011', 483],
    ['2012', 244]
  ]);
  var lineChart = new google.visualization.LineChart(document.getElementById('chart_div'));
  var options = {
    animation: {
      duration: 600
    },
    pointSize: 3
  };
lineChart.draw(data, options);
  document.getElementById('addData').addEventListener('click', function() {
    var year = Number(data.getValue(data.getNumberOfRows() - 1, 0)) + 1;
    data.addRow([String(year), Math.random()*1000]);
    lineChart.draw(data, options);
  });
}
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
      </script>  
   </body>
</html>

Related Tutorials