अपडेट कर रहा है Google चार्ट PHP और जावास्क्रिप्ट

Question

साथ गतिशील रूप से मैं एक गूगल चार्ट (Google Visualization API, नहीं Google Charts API का प्रयोग करके) कि पृष्ठ लोड पर भरता है। इसके बाद, उपयोगकर्ता एकाधिक ड्रॉप-डाउन मेनू से विकल्पों का चयन कर सकते हैं। मैं चाहता हूं कि उपयोगकर्ता अपने चयन के आधार पर Google चार्ट अपडेट कर पाए।

मैं पहले से ही MySQL के माध्यम से नए डेटा हड़पने के लिए PHP कोड बना लिया है - उपयोगकर्ता विभिन्न विकल्पों का चयन करता है के बाद।

प्रश्न: क्या मुझे वर्तमान ग्राफ को प्रतिस्थापित करने की आवश्यकता है? या ग्राफ को अद्यतन करने के लिए मुझे जावास्क्रिप्ट फ़ंक्शन बनाना चाहिए?

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 चार्ट जावा स्क्रिप्ट कोड है। और चार्ट को पुनः प्राप्त करने का अनुरोध करें।

आप इस बाहर का परीक्षण करने के 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); 
} 
​