Question

我正在编写一个从中检索数据的程序我的服务器上使用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生成的输出：

track.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>

Answer 1

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

＆＃13;

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

＆＃13;

通过JSON显示PHP脚本中的Google图表

1 个答案: