通过 JSON 从 php 脚本显示谷歌图表


Displaying Google Chart from php script over JSON

我正在编写一个从中检索数据的程序我的服务器上带有PHP的SQLite数据库,应该显示使用 JavaScript 的 Google 图表上的数据。

当我运行该程序时,出现以下错误:

1) Synchronous XMLHttpRequest on the main thread is deprecated

2) not an array => var data = google.visualization.arrayToDataTable(obj);

我添加了下面的所有代码以及 track 生成的输出.php:

跟踪.php

<?php
$dir = 'sqlite:mijn.db';
$dbh = new PDO($dir) or die("cannot open database");
$query = "SELECT * FROM DS18b20 ORDER BY date DESC , time DESC LIMIT 10";
$data[0] = array('date' , 'time' , 'value');
$index=1;
foreach ($dbh->query($query) as $row) {
    $data[$index++] = array($row[0] , $row[1] , $row[2] );
    // echo $data[$index-1][0] , " ";
}
echo json_encode($data);
unset($dbh); // Close Handle
?>

示例输出:

[["date","time","value"],["150122","21:38","20.9"],["150122","21:37","20.9"],["150122","21:37","20.9"],["150122","21:37","20.9"],["150120","22:33","20.6"],["150120","22:33","20.7"],["150120","22:31","20.6"],["150120","22:30","20.7"],["150120","20:00","19.7"],["150120","20:00","19.7"]]

HTML 文件 :

<script>
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
    var jsonData = $.ajax({
        url: "track.php", dataType: "json", async: false
    }).responseText;
    var obj = window.JSON.stringify(jsonData);
    var data = google.visualization.arrayToDataTable(obj);
    var options = {
         title: 'Trackerdata example'
    };
    var chart = new google.visualization.LineChart(
    document.getElementById('chart_div'));
    chart.draw(data, options);
}
</script>

不要使用同步请求。您可以将图表构建代码的其余部分放在 done() 调用中。

google.load("visualization", "1", {
  packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
    $.ajax({
      url: "track.php",
      dataType: "json"
    }).done(function(jsonData) {
        var obj = window.JSON.stringify(jsonData);
        var data = google.visualization.arrayToDataTable(obj);
        var options = {
          title: 'Trackerdata example'
        };
        var chart = new google.visualization.LineChart(
          document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    });