डायनामिक डेटा और गूगल चार्ट के साथ कैसे काम करें?

आपका प्रश्न किसी ऐसी चीज को छूता है जिसने मुझे बहुत निराश किया है:Google का एपीआई दस्तावेज बहुत अच्छा नहीं है! विशेष रूप से, चार्ट एपीआई के लिए, मूल रूप से उनके सभी उदाहरणों में, उनके चार्ट के लिए डेटा पृष्ठ में हार्ड कोडित होता है, और, वास्तविक जीवन में, आप मूल रूप से हमेशा एक डीबी में संग्रहीत डेटा प्रदान करेंगे और ब्राउज़र को प्रेषित करेंगे।

1) आपको सर्वर पर कुछ कोड चाहिए (मैं PHP का उपयोग करता हूं) जो डेटाबेस से पूछताछ करता है, "प्रिंट" करता है और जेएसओएन/कॉम्प्लेक्स डेटा संरचना को प्रसारित करता है जो एक ऑब्जेक्ट है जहां गुण एरे होते हैं जिनमें गुणों और मूल्यों के साथ अतिरिक्त ऑब्जेक्ट होते हैं सटीक प्रारूप है कि Google का चार्ट जावास्क्रिप्ट ब्राउज़र में इसे प्राप्त करने की अपेक्षा करता है। मैंने इसे इस तरह किया:

$sql = "SELECT year,d_pop FROM metrics WHERE year IN ('1940','1950','1960','1970','1980')";

$sth = mysql_query($sql, $conn) or die(mysql_error());

//start the json data in the format Google Chart js/API expects to recieve it
$JSONdata = "{
           \"cols\": [
               {\"label\":\"Year\",\"type\":\"string\"},
               {\"label\":\"Detroit Population\",\"type\":\"number\"}
             ],
        \"rows\": [";

//loop through the db query result set and put into the chart cell values
while($r = mysql_fetch_assoc($sth)) {
   $JSONdata .= "{\"c\":[{\"v\": " . $r['year'] . "}, {\"v\": " . $r['d_pop']  ."}]},";

}    

//end the json data/object literal with the correct syntax
$JSONdata .= "]}";

echo $JSONdata;

2) आपको अपने पेज पर अपने जावास्क्रिप्ट में उस JSON ऑब्जेक्ट को प्राप्त करना होगा और इसे Google के चार्ट JS में पास करना होगा। मैं jQuery लाया और फिर इसकी AJAX विधि का उपयोग इस तरह किया:

function drawChart() {
    var jsonData = $.ajax({
        url: "index_db.php",
        dataType:"json",
        async: false
    }).responseText;

    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(jsonData);

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {vAxis: {minValue: 0}});
}

मेरे कोड स्निपेट्स mySQL DB को क्वेरी करने, JSON ऑब्जेक्ट Google चार्ट्स API की ज़रूरतों को उत्पन्न करने और इसे JQuery और AJAX के साथ प्राप्त करने के प्रमुख भागों पर ध्यान केंद्रित करते हैं। आशा है कि यह रोशन करेगा!