Mysql
 sql >> база данни >  >> RDS >> Mysql

как да работим с динамични данни и google диаграми?

Въпросът ви засяга нещо, което много ме разочарова:документацията за API на Google не е страхотна! По-специално, за Charts API, в основно всички техни примери, данните за тяхната диаграма са твърдо кодирани в страницата и в реалния живот вие основно винаги ще изобразявате данни, съхранявани в DB и предавани към браузъра.

1) Имате нужда от някакъв код на сървъра (използвам PHP), който прави заявки към базата данни, "отпечатва" и предава JSON/комплексната структура от данни, която е обект, където свойствата са масиви, които съдържат допълнителни обекти със свойства и стойности в точните формат, който JavaScript на Google Chart очаква да го получи в браузъра. Направих го така:

$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) Трябва да получите този JSON обект във вашия JavaScript на страницата си и да го предадете на Google Chart JS. Донесох JQuery и след това използвах неговия метод AJAX по следния начин:

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

Моите кодови фрагменти се фокусират върху ключовите части от запитването на mySQL DB, генерирането на JSON обекта, от който се нуждае Google Charts API, и получаването му с JQuery и AJAX. Надявам се това да освети!



  1. Database
  2.   
  3. Mysql
  4.   
  5. Oracle
  6.   
  7. Sqlserver
  8.   
  9. PostgreSQL
  10.   
  11. Access
  12.   
  13. SQLite
  14.   
  15. MariaDB
  1. Създайте нова база данни MySQL с помощта на Workbench

  2. Как работи функцията RIGHT() в MySQL

  3. MySQL игнорира ограничението NOT NULL

  4. Как да напишете изявление за избор на MySql, за да получите всички дефинирани настройки или настройки по подразбиране, които не са отменени за идентификатор в едно изявление

  5. Изображения в MySQL