Actualizando Google Chart dinámicamente con PHP y JavaScript

Question

Tengo un Google Chart (usando el Google Visualization API, no el Google Charts API) 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 he creado el código PHP para obtener los nuevos datos a través de MySQL, después de que el usuario selecciona las diversas opciones.

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

Aquí es mi Google Chart código 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

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

Puede modificar el playground example para probar esto.
Parece que este:

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