sql >> Databasteknik >  >> RDS >> Mysql

hur arbetar man med dynamisk data och google-diagram?

Din fråga berör något som har frustrerat mig mycket:Googles API-dokumentation är inte bra! Speciellt för Charts API, i i princip alla deras exempel, är data för deras diagram hårdkodad på sidan, och i verkligheten kommer du i princip alltid att rendera data som lagras i en DB och överförs till webbläsaren.

1) Du behöver lite kod på servern (jag använder PHP) som frågar databasen, "skriver ut" och sänder JSON/komplexa datastrukturen som är ett objekt där egenskaperna är arrayer som innehåller ytterligare objekt med egenskaper och värden i exakt format som Googles Chart JavaScript förväntar sig att ta emot i webbläsaren. Jag gjorde så här:

$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) Du måste ta emot det JSON-objektet i ditt JavaScript på din sida och skicka det till Googles Chart JS. Jag tog in JQuery och använde sedan dess AJAX-metod så här:

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

Mina kodsnuttar fokuserar på nyckeldelarna av att söka efter mySQL DB, generera JSON-objektet som Google Charts API behöver och ta emot det med JQuery och AJAX. Hoppas detta lyser upp!



  1. Logstash INPUT MySQL

  2. Kombinera flera rader eller resultat med samma titel för att bilda rullgardinsmenyer med PHP och MySQL

  3. MySQL - att välja nära en rumslig punkt

  4. PDOException:SQLSTATE[HY000] [2002] php_network_getaddresses:getaddriinfo misslyckades:Namn eller tjänst okänd