graficas - Actualización de Google Chart dinámicamente con PHP y JavaScript

google graphics

Question

Tengo un Google Chart (que usa la API de visualización de Google , no la API de Google Charts ) que se completa en la carga de la página. Después de lo cual, el usuario puede seleccionar opciones de múltiples menús desplegables. Me gustaría que el usuario pueda actualizar Google Chart en función de sus selecciones.

Ya creé el código PHP para obtener los nuevos datos a través de MySQL, luego de que el usuario selecciona las diferentes opciones.

Pregunta : ¿Debería reemplazar el gráfico actual? o debería crear una función de JavaScript para actualizar el gráfico?

Aquí está mi código Google Chart JavaScript:

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

Simplemente actualizaría los datos en lugar de reemplazar el gráfico. Y solicite que se vuelva a dibujar el cuadro.

Puede modificar el ejemplo del patio de recreo para probarlo.
Se parece a esto:

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