Dynamiczne aktualizowanie wykresu Google za pomocą PHP i JavaScript

Question

Mam wykres Google (przy użyciu Google Visualization API, a nie Google Charts API), który zapełnia się po wczytaniu strony. Następnie użytkownik może wybierać opcje z wielu menu rozwijanych. Chciałbym, aby użytkownik mógł aktualizować wykres Google na podstawie wybranych przez siebie opcji.

Już stworzyłem kod PHP, aby pobrać nowe dane przez MySQL - po tym, jak użytkownik wybierze różne opcje.

Pytanie: Czy muszę wymienić bieżący wykres? lub czy powinienem utworzyć funkcję JavaScript, aby zaktualizować wykres?

Oto mój kod JavaScript 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

Chciałbym po prostu zaktualizować dane zamiast wymiany wykresu. I poproś o ponowne narysowanie wykresu.

Możesz zmodyfikować playground example, aby to przetestować.
Wygląda to tak:

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