title: Updating Google Chart dynamically with PHP and JavaScript
body: <p>I have a Google Chart (using the <a href="http://code.google.com/apis/visualization/documentation/using_overview.html" rel="noreferrer">Google Visualization API</a>, not <a href="http://code.google.com/apis/chart/basics.html" rel="noreferrer">Google Charts API</a>) that populates on page load.  After which, the user can select options from multiple drop-down menu's.  I would like the user to be able to update the Google Chart based on their selections.</p>
  
  <p>I've already created the PHP code to grab the new data via MySQL - after the user selects the various options.</p>
  
  <p><strong>Question</strong>:  Should I need to replace the current graph? or should I create a JavaScript function to update the graph?</p>
  
  <p>Here's my Google Chart JavaScript code:</p>
  
  <pre><code>google.load("visualization", "1", {packages:["columnchart"]});
  google.setOnLoadCallback(drawChart);
  
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Cluster');
    data.addColumn('number', 'Loans');
    data.addColumn('number', 'Lines');
  
  /* create for loops to add as many columns as necessary */
  
  var len = (encoded_cluster_name.length)-27; // encoded_line_volume.length;
  
    data.addRows(len);
  
  for(i=0; i&lt;len; i++) {
  
          var lines = (encoded_line_volume[i])/100000;
      var loans = (encoded_loan_volume[i])/100000;
  
  data.setValue(i, 0, ' '+encoded_cluster_name[i]+' ');       /* x-axis */
  data.setValue(i, 1, loans);             /* Y-axis category #1*/
  data.setValue(i, 2, lines);             /* Y-axis category #2*/
  }
  
  /*********************************end of loops*****/
  
    var chart = new google.visualization.ColumnChart(
                  document.getElementById('chart_div'));
    chart.draw(data, {
                      width: 600,
                      height: 300,
                      is3D: true,
                      title: 'Prospect Population',
                      legend: 'right'
                     });
  }
  </code></pre>