0

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.
SheetJS
  • 22,470
  • 12
  • 65
  • 75
Alex Bogias
  • 1,826
  • 2
  • 30
  • 45
  • related @ http://stackoverflow.com/questions/12485560/highcharts-returning-error-14 date needs be **epoch time** as `int` (not `string`) value needs to be a number (`float` or `int`) too In you case everything is string – Jugal Thakkar Nov 25 '12 at 19:00
  • i dont get the error 14! – Alex Bogias Nov 25 '12 at 20:15
  • I never said u do. I linked it for you as your json also had strings where it shud've had numeric – Jugal Thakkar Nov 26 '12 at 04:03
  • http://stackoverflow.com/questions/12520865/convert-mysql-resultset-into-a-name-data-object-to-be-fed-into-highcharts/12525219#12525219 & http://stackoverflow.com/questions/12420262/issue-with-highchart-data-display-when-parsing-json-data/12421104#12421104 may be related? your json is array of objects, you need it to be array of array, you can do this either in PHP or in JS as per your need – Jugal Thakkar Nov 26 '12 at 05:22

2 Answers2

2

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

Demo @ jsFiddle

Jugal Thakkar
  • 13,432
  • 4
  • 61
  • 79
  • Thanks a lot mate.. I tried every command from any example i found here, but all inside the loop :/ It is now running good but i still get this: Unexpected value NaN parsing y attribute. – Alex Bogias Nov 26 '12 at 11:20
  • 1
    @Alex yes i saw that in the console too, but don't worry its just a warning and not an error, so should not be breaking anything – Jugal Thakkar Nov 26 '12 at 11:22
  • And 1 last question: How i can reverse the order of points in the graph. It now gives me the latest one first! – Alex Bogias Nov 26 '12 at 13:19
  • Its ok! i used $registered = array_reverse($registered); and it looks great! Thank you all! – Alex Bogias Nov 26 '12 at 13:38
1

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.

Martin Sommervold
  • 152
  • 9