Wie arbeite ich mit dynamischen Daten und Google Charts?

Ihre Frage berührt etwas, das mich sehr frustriert hat:Die API-Dokumentation von Google ist nicht großartig! Insbesondere für die Charts-API sind die Daten für ihr Diagramm in praktisch allen Beispielen fest auf der Seite codiert, und im wirklichen Leben rendern Sie im Grunde immer Daten, die in einer Datenbank gespeichert und an den Browser übertragen werden.

1) Sie benötigen einen Code auf dem Server (ich verwende PHP), der die Datenbank abfragt, die JSON-/komplexe Datenstruktur "druckt" und überträgt, bei der es sich um ein Objekt handelt, bei dem die Eigenschaften Arrays sind, die zusätzliche Objekte mit Eigenschaften und Werten enthalten im genauen Format, das Googles Chart-JavaScript erwartet, um es im Browser zu empfangen. Ich habe es so gemacht:

$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) Sie müssen dieses JSON-Objekt in Ihrem JavaScript auf Ihrer Seite empfangen und es an Googles Chart JS übergeben. Ich habe JQuery eingeführt und dann seine AJAX-Methode wie folgt verwendet:

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

Meine Code-Snippets konzentrieren sich auf die wichtigsten Teile des Abfragens der mySQL-Datenbank, des Generierens des JSON-Objekts, das die Google Charts-API benötigt, und des Empfangens mit JQuery und AJAX. Hoffe das leuchtet ein!