PHPとJavaScriptを使用してGoogle Chartを動的に更新する

Question

ページロードに負担をかけるGoogleグラフ（Google Visualization APIではなく、Google Charts API）があります。その後、ユーザーは複数のドロップダウンメニューからオプションを選択できます。私は、ユーザーがその選択に基づいてGoogle Chartを更新できるようにしたいと思います。

私はすでに、MySQLを介して新しいデータを取得するためのPHPコードを作成しました。ユーザーがさまざまなオプションを選択した後です。

質問：現在のグラフを置き換える必要がありますか？グラフを更新する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

：

は、ここに私のGoogleのチャートJavaScriptコードです。グラフを再描画するように要求します。

playground exampleを修正してこれをテストすることができます。
それは次のようになります。

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