title: Update Chart Programmatically with Google Chart Api
body: <p>I want to add/remove some data to my multiple charts. But I declare dataTable var globally and set it onCallBack, no problem. But I want to add/remove data after callback with Ajax.</p>
  
  <pre><code>var testRows = [
      ['Test-A', 4, 3],
      ['Test-B', 1, 2],
      ['Test-C', 3, 4],
      ['Test-D', 2, 0],
      ['Test-E', 2, 5]
  ];
  var testRow = ['Test-F', 8, 1];
  var data = null;
  
  google.load("visualization", "1", {
      packages: ["corechart", 'table']
  });
  
  google.setOnLoadCallback(function () {
      data = new google.visualization.DataTable();
      data.addColumn('string', 'Task');
      data.addColumn('number', 'Hours per Day');
      data.addColumn('number', 'How Sexy');
      data.addRows(testRows);
      drawChart('tablechart', 'div_id_1', testRow, null);
      drawChart('columnChart', 'div_id_2', null, null);
  });
  
  function drawChart(chartType, containerID, row, options) {
      data.addRow(row);
      var containerDiv = document.getElementById(containerID);
      var chart = false;
      if (chartType.toUpperCase() == 'BARCHART') {
          chart = new google.visualization.BarChart(containerDiv);
      } else if (chartType.toUpperCase() == 'COLUMNCHART') {
          chart = new google.visualization.ColumnChart(containerDiv);
      } else if (chartType.toUpperCase() == 'PIECHART') {
          chart = new google.visualization.PieChart(containerDiv);
      } else if (chartType.toUpperCase() == 'TABLECHART') {
          chart = new google.visualization.Table(containerDiv);
      }
  
      if (chart == false) {
          return false;
      }
      chart.draw(data, options);
  }
  
  drawChart('tablechart', 'div_id_1', ['abiz',5,2], null);
  drawChart('columnChart', 'div_id_2', ['cabiz',5,2], null);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/eron/gD7KL/1/" rel="nofollow noreferrer">http://jsfiddle.net/eron/gD7KL/1/</a></p>