Dynamisches Aktualisieren von Google Chart mit PHP und JavaScript

Question

Ich habe ein Google-Diagramm (mit dem Google-Visualisierungs-API, nicht Google Charts-API), das beim Laden der Seite ausgefüllt wird.Anschließend kann der Benutzer Optionen aus mehreren Dropdown-Menüs auswählen.Ich möchte, dass der Nutzer das Google Chart basierend auf seiner Auswahl aktualisieren kann.

Ich habe bereits den PHP-Code erstellt, um die neuen Daten über MySQL abzurufen – nachdem der Benutzer die verschiedenen Optionen ausgewählt hat.

Frage:Muss ich das aktuelle Diagramm ersetzen?oder sollte ich eine JavaScript-Funktion erstellen, um das Diagramm zu aktualisieren?

Hier ist mein JavaScript-Code für Google Chart:

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

Answer 1

Ich würde einfach die Daten aktualisieren, anstatt das Diagramm zu ersetzen.Und fordern Sie eine Neuzeichnung des Diagramms an.

Sie können die ändern Beispiel für einen Spielplatz um das auszuprobieren.
Es sieht aus wie das:

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);
}
​