PHP 및 JavaScript로 동적으로 Google 차트 업데이트

Question

페이지로드시 채울 Google 차트가 있습니다 (Google Visualization API이 아닌 Google Charts API). 그런 다음 사용자는 여러 드롭 다운 메뉴에서 옵션을 선택할 수 있습니다. 사용자가 선택에 따라 Google 차트를 업데이트 할 수 있기를 바랍니다.

사용자가 다양한 옵션을 선택한 후에 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

:

여기 내 구글 차트 자바 스크립트 코드입니다. 차트를 다시 그리도록 요청하십시오.

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