通过JSON通过php脚本显示Google Chart

Question

I'm writing a program that retrieves data from an SQLite database on my server with PHP and should display the data on a Google chart using JavaScript.

When I run the program I get following errors:

1) Synchronous XMLHttpRequest on the main thread is deprecated

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

I added all the code below and also the output generated by 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
?>

example output:

[["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 file :

<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

Don't use a synchronous request. You can put the rest of the chart-building code in a done() call.

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