hoe te werken met dynamische data en google charts?

Uw vraag raakt iets dat me erg frustreert:de API-documentatie van Google is niet geweldig! In het bijzonder voor Charts API, in vrijwel al hun voorbeelden, zijn de gegevens voor hun grafiek hard gecodeerd op de pagina, en in het echte leven zult u in principe altijd gegevens weergeven die zijn opgeslagen in een DB en naar de browser worden verzonden.

1) Je hebt wat code op de server nodig (ik gebruik PHP) die de database doorzoekt, de JSON/complexe gegevensstructuur "afdrukt" en verzendt, wat een object is waarbij de eigenschappen arrays zijn die extra objecten bevatten met eigenschappen en waarden in de exacte formaat dat Google's Chart JavaScript verwacht om het in de browser te ontvangen. Ik deed het als volgt:

$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) U moet dat JSON-object in uw JavaScript op uw pagina ontvangen en doorgeven aan Google's Chart JS. Ik bracht JQuery binnen en gebruikte toen zijn AJAX-methode als volgt:

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

Mijn codefragmenten zijn gericht op de belangrijkste onderdelen van het opvragen van de mySQL DB, het genereren van het JSON-object dat Google Charts API nodig heeft en het ontvangen ervan met JQuery en AJAX. Ik hoop dat dit verlicht!