Mysql
 sql >> Base de Dados >  >> RDS >> Mysql

como trabalhar com dados dinâmicos e gráficos do google?


Sua pergunta toca em algo que me frustrou muito:a documentação da API do Google não é ótima! Em particular, para a API de gráficos, em basicamente todos os exemplos, os dados do gráfico são codificados na página e, na vida real, você basicamente sempre estará renderizando dados armazenados em um banco de dados e transmitidos para o navegador.

1) Você precisa de algum código no servidor (eu uso PHP) que consulta o banco de dados, "imprime" e transmite a estrutura de dados JSON/complex que é um objeto onde as propriedades são arrays que contém objetos adicionais com propriedades e valores no exato formato que o Chart JavaScript do Google espera recebê-lo no navegador. Eu fiz assim:
$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) Você precisa receber esse objeto JSON em seu JavaScript em sua página e passá-lo para o Chart JS do Google. Eu trouxe o JQuery e usei o método AJAX assim:
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}});
}

Meus trechos de código se concentram nas principais partes da consulta ao banco de dados mySQL, gerando o objeto JSON que a API do Google Charts precisa e recebendo-o com JQuery e AJAX. Espero que isso ilumine!