Generating JSON stream in PHP and displaying it as Google Chart
Question
I have problem find any useful documentation on this topic, so I decided to ask here.
I try to create streamed JSON from external data. My current code is this:
<?php
header('Content-type:application/json;charset=utf-8');
ob_implicit_flush(true);
echo '{"points":[';
for($i = 0, $j = 100; ; $i+=2, $j-=3) {
$data = '{"x":'.$i .',"y":'.$j.'}';
if($i >= $j){
echo $data . "]}";
break;
}
echo $data . ", ";
sleep(1);
ob_flush();
}
?>
The data will eventually come from elsewhere, but this cycle will suffice for now. Output is this:
{"points":[{"x":0,"y":100}, {"x":2,"y":97}, {"x":4,"y":94}, {"x":6,"y":91}, {"x":8,"y":88}, {"x":10,"y":85}, {"x":12,"y":82}, {"x":14,"y":79}, {"x":16,"y":76}, {"x":18,"y":73}, {"x":20,"y":70}, {"x":22,"y":67}, {"x":24,"y":64}, {"x":26,"y":61}, {"x":28,"y":58}, {"x":30,"y":55}, {"x":32,"y":52}, {"x":34,"y":49}, {"x":36,"y":46}, {"x":38,"y":43}, {"x":40,"y":40}]}
but, as you can see, it comes "one point at a time" (real data also will). I have a feeling that this is not treated as proper JSON, but I can't figure out how to use json_encode() for this purpose. Then I try to display it on client side via AJAX and Google Charts:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php $property->getProperty('applicationPage',$_SESSION['lang'],'title') ?></title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType: "json",
async: false
}).responseText;
var options = {
title: 'Graf',
curveType: 'function',
legend: { position: 'bottom' },
width: 500,
height: 500
};
var chart = new google.visualization.LineChart(document.getElementById('div_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
But I can't make it work. Now I don't know if I messed up only Google Charts drawing, the JSON generating or both.
1 answers
solution1
0 ACCPTED 2016-05-27 10:13:28
you forget some litle things.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php $property->getProperty('applicationPage',$_SESSION['lang'],'title') ?></title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType: "json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Graf',
curveType: 'function',
legend: { position: 'bottom' },
width: 500,
height: 500
};
var chart = new google.visualization.LineChart(document.getElementById('div_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="div_chart"></div>
</body>
</html>
and your json shall look like this
{
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"},
{"id":"","label":"Slices","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
{"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
]
}
https://developers.google.com/chart/interactive/docs/reference#dataview-class
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.