bagaimana cara bekerja dengan data dinamis dan grafik google?

Pertanyaan Anda menyentuh sesuatu yang sangat membuat saya frustrasi:Dokumentasi API Google tidak bagus! Khususnya, untuk Charts API, pada dasarnya semua contoh mereka, data untuk bagan mereka dikodekan secara keras di halaman, dan, dalam kehidupan nyata, pada dasarnya Anda akan selalu merender data yang disimpan dalam DB dan dikirimkan ke browser.

1) Anda memerlukan beberapa kode di server (saya menggunakan PHP) yang menanyakan database, "mencetak" dan mentransmisikan JSON/struktur data kompleks yang merupakan objek di mana propertinya adalah array yang berisi objek tambahan dengan properti dan nilai yang sama persis format yang diharapkan oleh Google's Chart JavaScript untuk menerimanya di browser. Saya melakukannya seperti ini:

$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) Anda perlu menerima objek JSON itu di JavaScript Anda di halaman Anda dan meneruskannya ke Google's Chart JS. Saya membawa JQuery dan kemudian menggunakan metode AJAX seperti ini:

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

Cuplikan kode saya fokus pada bagian-bagian penting dari kueri DB mySQL, menghasilkan objek JSON yang dibutuhkan Google Charts API, dan menerimanya dengan JQuery dan AJAX. Semoga ini mencerahkan!