Load JSON data to Highchart - highcharts

Question

Am trying to plot Spline graph using data fetched from MySQL.
<script>
var chart;
function requestData()
{
$.ajax({
url: 'get_hourly_data.php',
datatype: "json",
success: function(data)
{
chart.series[0].addPoint(data);
},
});
}
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph',
type: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Monitoring'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Response time (ms)',
margin: 80
}
},
series: [{
name: 'Time',
data: [],
}]
});
});
</script>
get_hourly_data.php
<?php
// Query to fetch half an hour data from current time
$query = "SELECT UNIX_TIMESTAMP(current_ts), response_time FROM site_response WHERE current_ts >= DATE_SUB( NOW( ) , INTERVAL 30 MINUTE ) AND site_id ='2'";
$result = mysql_query($query,$db);
while($item = mysql_fetch_array($result))
{
$current_time = $item['UNIX_TIMESTAMP(current_ts)']*1000;
$response_time = $item['response_time']*1;
$ret = array($current_time, $response_time);
echo json_encode($ret);
}
?>
My JSON data looks like this
[1357536877000,0.012178182601929][1357536881000,0.0123610496521][1357536891000,0.011971950531006][1357536895000,0.011821985244751][1357536916000,0.010467052459717]
If I limit only one return value by replacing query mentioned below in get_hourly_data.php am able to plot graph with one value but not for group of values. Requirement is to fetch half an hour data from now and plot spline chart.
$query = "SELECT UNIX_TIMESTAMP(current_ts), response_time FROM site_response WHERE current_ts >= DATE_SUB( NOW( ) , INTERVAL 30 MINUTE ) AND site_id ='2' limit 1";
I suppose am doing something wrong when adding server data to graph .Probably after jQuery success function .Am first time stackoverflow user and new to jQuery. Could someone please guide me?

Answer 1

Posting code which works perfectly.
<script>
var chart;
function requestData()
{
$.ajax({
url: 'get_hourly_data.php',
datatype: "json",
success: function(data)
{
chart.series[0].setData(data);
},
});
}
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph',
type: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Monitoring'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Response time (ms)',
margin: 80
}
},
series: [{
name: 'Time',
data: [],
}]
});
});
</script>
get_hourly_data.php:
$ret = array();
while($item = mysql_fetch_array($result))
{
$current_time = $item['UNIX_TIMESTAMP(current_ts)']*1000;
$response_time = $item['response_time']*1;
$y = rand(0, 100);
$ret[] = array($current_time, $response_time);
}
echo json_encode($ret);

Answer 2

You are echoing inside the while loop. You need to create an array of array for the data.
You need your JSON to look like
[[1357536877000,0.012178182601929],[1357536881000,0.0123610496521],[1357536891000,0.011971950531006],[1357536895000,0.011821985244751],[1357536916000,0.010467052459717]]
Something like this may work
$dataArr=new array();
while($item = mysql_fetch_array($result))
{
$current_time = $item['UNIX_TIMESTAMP(current_ts)']*1000;
$response_time = $item['response_time']*1;
$dataArr[] = array($current_time, $response_time);
}
echo json_encode($dataArr);

Answer 3

$query = "SELECT UNIX_TIMESTAMP(current_ts) * 1000, response_time FROM site_response WHERE current_ts >= DATE_SUB( NOW( ) , INTERVAL 30 MINUTE ) AND site_id ='2'";
$dataArr = new array();
while($item = mysql_fetch_array($result))
{
$current_time = $item['UNIX_TIMESTAMP(current_ts)'];
$response_time = $item['response_time'];
$dataArr[] = array($current_time, $response_time);
}
echo json_encode($dataArr);
On success function
success: function(data)
{
data = jQuery.parseJSON(data);
chart.series[0].addPoint(data);
}