Updating Google Visualization API with <div> button

Fellow Coders,

I'm trying to update a Google Visualization API that has already been populated with data. Here's the background:

The user get's to choose several options from drop down menu's. After which, the user may select to update the Google API from a button.

Do I need a QueryWrapper function, initiated through the button onlick, to update the Google API?

HTML code:

<div class="css_button_example" value="UpdateGraph" onclick="showUser()"><span>Update Graph</span></div>

In the above button code, showUser() is a JavaScript function that pulls an MySQL query through PHP - the result is json_encoded back into the Google API JavaScript code. Do I need another JavaScript function to update the Google API?

Here's the Google API 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<len; i++) {

 var lines = (encoded_line_volume[i])/100000;
 var loans = (encoded_loan_volume[i])/100000;

 data.setValue(i, 0, ' '+encoded_cluster_name[i]+' ');
 data.setValue(i, 1, loans);
 data.setValue(i, 2, lines);
}

/*********************************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'});

}

Any suggestions on how I can augment the Google API code to update the graph? Maybe a QueryWrapper?

ansaurus

tags:

views:

answers:

Updating Google Visualization API with <div> button

related questions