Updating Google Chart dynamically with PHP and JavaScript

Question

I have a Google Chart (using the Google Visualization API, not Google Charts API) 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.

I've already created the PHP code to grab the new data via MySQL - after the user selects the various options.

Question: Should I need to replace the current graph? or should I create a JavaScript function to update the graph?

Here's my Google Chart JavaScript 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]+' ');       /* 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'
                   });
}

dlamblin · Accepted Answer · 2009-11-12 06:41:55Z

16

I would just update the data instead of replacing the chart. And request the chart get redrawn.

You can modify the playground example to test this out.
It looks like this:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Height');
  data.addRows(3);
  data.setCell(0, 0, 'Tong Ning mu');
  data.setCell(1, 0, 'Huang Ang fa');
  data.setCell(2, 0, 'Teng nu');
  data.setCell(0, 1, 174);
  data.setCell(1, 1, 523);
  data.setCell(2, 1, 86);

  // Create and draw the visualization.
  var v=new google.visualization.ColumnChart(
          document.getElementById('visualization')
        );
  v.draw(data, null);
  // Pretend update data triggered and processed
  data.setCell(2, 1, 860);
  v.draw(data, null);
}

answered Nov 12, 2009 at 6:41

dlamblin

45.6k22 gold badges105 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

brussels0828 Over a year ago

dlamblin, Thanks for answering my question. I owe ya one! brussels0828

dlamblin Over a year ago

You're welcome, and that playground link should have had the _ unencoded (as %5F) in the # portion of the URL. But posts get filtered for markdown. The link in this comment should work: code.google.com/apis/ajax/playground/…

Shackrock Over a year ago

@dlamblin I pasted your code in the Playground and hit play, but it doesn't do anything... any ideas? haha.

dlamblin Over a year ago

@Shackrock if I go to code.google.com/apis/ajax/playground/… and paste in the code in my answer and press "run code" it works for me.

Gašper Sladič Over a year ago

What about adding a row dynamically and not only changing the chart data? I need this for Annotation Chart, to show how data is changing in real time. I did as here is suggested, but gives an error.

Collectives™ on Stack Overflow

Updating Google Chart dynamically with PHP and JavaScript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related