Reputation: 1880
I am trying to parse json data created by a php file to another script and display its values to a highchart.
My data.php which creates the json data is this:
<?php
header("Content-type: application/json");
$dbhost = "localhost";
$dbuser = "db";
$dbpass = "xxxxx";
$dbname = "db";
$db = mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db($dbname,$db);
$query = "SELECT * FROM monitor_total";
$result = mysql_query($query,$db);
while($row = mysql_fetch_array($result)) {
$date = $row["date"];
$count = $row["count"];
$array[] = array("date" =>$date,"count"=>$count);
}
echo json_encode($array);
?>
the data.php output is:
[{"date":"2012-11-23","count":"582311"},{"date":"2012-11-24","count":"582322"},{"date":"2012-11-22","count":"582121"},{"date":"2012-11-21","count":"581321"},{"date":"2012-11-19","count":"572821"},{"date":"2012-11-20","count":"581321"},{"date":"2012-11-18","count":"582421"},{"date":"2012-11-17","count":"579321"},{"date":"2012-11-16","count":"581321"},{"date":"2012-11-25","count":"558178"}]
inside <script>
:
var monitor_graph; // globally available
monitor_graph = new Highcharts.Chart({
chart: {
renderTo: 'graph',
type: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Registered and total players by date'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Players'
}
},
series: [{
name: 'Total Players',
data: []
}]
});
function requestData() {
$.ajax({
url: 'data.php',
success: function(data) {
$.each(data, function(i,item){
monitor_graph.series[0].setData(??????????);
});
setTimeout(requestData, 1000);
},
});
}
How i create a serie named total players with 'item.date' in x-axis and 'item.count' in y-axis???
Please help me!
UPDATE: i add this inside each:
monitor_graph.xAxis[0].setCategories([item.date]);
monitor_graph.series[0].setData([parseFloat(item.count)]);
and i now get the 1 point exactly as i need it but with the following error:
Unexpected value NaN parsing y attribute.
Upvotes: 0
Views: 1553
Reputation: 13482
you need to modify your success callback to something like this
var categories=[];
var seriesData=[];
$.each(data,function(){
categories.push(this.date);
seriesData.push(parseInt(this.count));
});
chart.xAxis[0].setCategories(categories);
chart.series[0].setData(seriesData);
the Series.setData()
method expects an array of int/float and not strings and should be called with entire data set and not each point. You were doing this inside the $.each
should be done outside this loop. Same goes with categories
Upvotes: 2
Reputation: 152
The data you recieve is in the form of an array with objects. You need to iterate over the array, which you are already doing in your $.each function. This will give you access to each object in the form of your i variable. This variable can access the properties you need via dot-notation. In your case that would be i.date and i.count.
From what i can tell, the setData method accepts an array for the values you can set, so replace your ???? with the following:
monitor_graph.series[0].setData([i.date, i.count]);
hope that helps.
Upvotes: 1