Question

Basically I am writing a report script where it pulls data from a database and I want to parse it into a Graph using JSON, jQuery and FLOT.

I have got the data into the JSON and the graph half-generates, but it doesn’t populate with the correct data (or any data for that matter).

Here is the jQuery code:

$(document).ready(function(){
var options = {
    legend: {
        show: false,
        margin: 10,
        backgroundOpacity: 0.5
    },
    points: {
        show: true,
        radius: 3
    },
    lines: {
        show: true
    }
};  

var plotarea = $("#plotarea");
plotarea.css("height", "250px");
plotarea.css("width", "500px");

$('button[name="getJSON"]').click(function(){
    $.ajax({
        url: 'reports.php?r=1', 
        dataType: 'json', 
        success: function(data){
            $.plot( plotarea , data, options );
        }
    });
});

});

Here is the PHP code which is working correctly as far as I know:

$r = addslashes($_GET['r']);

            if(!$r){
                die('Incorrect Value for \'r\' was set');
            }                      

            $sqlQuery = mysql_query(sprintf(
                "SELECT DATE_FORMAT(FROM_UNIXTIME(`date_registration`), '%%d-%%m-%%Y') AS `date`, COUNT(1) AS `count`
                FROM `crowdcube_users`
                WHERE `date_registration` BETWEEN %d AND %d
                GROUP BY `date`",
                $startDate,
                $endDate
            ));



            while($row = mysql_fetch_assoc($sqlQuery)){                                   
                $newData[] = array(
                    'label' => $row['date'],
                    'data'  => array(
                                    $row['date'] => $row['count']
                                )
                    );
            }

            //Encode the array into JSON data
            echo json_encode($newData);

Here is the JSON array:

[{"label":"25-07-2011","data":{"25-07-2011":"27"}},{"label":"26-07-2011","data":{"26-07-2011":"27"}},{"label":"27-07-2011","data":{"27-07-2011":"9"}},{"label":"28-07-2011","data":{"28-07-2011":"17"}},{"label":"29-07-2011","data":{"29-07-2011":"18"}},{"label":"30-07-2011","data":{"30-07-2011":"13"}},{"label":"31-07-2011","data":{"31-07-2011":"3"}}]

And finally this is what I get when I generate the graph:

What am I doing wrong? Any help would be greatly appreciated!

Thanks in advance!

Answer 1

right from the Flot FAQ: check your data types. To JSON, "27" is not the same as 27.

Q: Flot isn’t working when I’m using JSON data as source!

A: Actually, Flot loves JSON data, you just got the format wrong.
Double check that you’re not inputting strings instead of numbers,
like [[“0”, “-2.13”], [“5”, “4.3”]]. This is most common mistake, and
the error might not show up immediately because Javascript can do some
conversion automatically.

Also, your data structure is way different from what Flot expects. Specifically, a data sequence should be a list of datapoints, each one is a list of coordinates:

{data:[[0,-2.13],[5,4.3],.....]}

As for timebased data, you have to use Javascript timestamps, that is number of miliseconds from the epoch. In most cases it’s just the Unix timestamp multiplied by 1000