How to pass JSON to jqChart?

Question

Client side sends post request to php on server side. Php returns json to client. Example:

[["1","-1"],["2","0"],["3","0"],["4","0"],["5","4"],["6","5"],["7","3"]]

Now from the client side I have to create chart. I created chart with jQuery plugin jqPlot and Flot, but jqChart doesn't show correctly. Here is jQuery code:

            if ($jqlib == "flot") {
                var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
                $.post('database2json.php', function(data){
                    $.plot($("#placeholder"), [d2, data]);
                },
                'json'
                );
            } else if ($jqlib == "jqchart") {
                $.post('database2json.php', function(podaci){
                    $('#placeholder').jqChart({
                        title: { text: 'Chart Title'},
                        series: [
                            {
                                type: 'line',
                                data: podaci
                            }
                        ]
                    });
                });
            }

With that code, Flot draws chart with line, and jqChart draws chart but there is not line, it's empty chart.

How to solve this problem?

EDIT1: Here is screenshot of jqChart output: enter image description here

On x axis it draws from 1 to 31 as expected, also y axis is ok, but there is no line.

EDIT2: @DraganMatek, mentioned that jqChart accepts pair values [x, y], where x is string, date or numeric, and y is numeric.

In the database there are both columns, with type int.

PHP code on the server side, to fetch these data is:

$result = mysql_query("select Dan, Temperatura from TEMPERATURA");
        $niz = array();
    while ($row = mysql_fetch_array($result)) {
                $niz[] = array($row['Dan'], $row['Temperatura']);  
    }

        $obj = json_encode($niz);
        echo $obj;

I don't understand why it's both x and y strings after sending as json. Maybe I could parse this on the client side?

EDIT3: I checked with Firebug that on client side I get this:

[["1","-1"],["2","0"],["3","0"],["4","0"],["5","4"],["6","5"],["7","3"],["8","2"],["9","2"],["10","1"],["11","-2"],["12","-2"],["13","0"],["14","1"],["15","-2"],["16","-1"],["17","-1"],["18","-2"],["19","-1"],["20","3"],["21","-1"],["22","0"],["23","1"],["24","3"],["25","1"],["26","1"],["27","-1"],["28","-1"],["29","4"],["30","5"],["31","5"]]

Why is so? Into database there are two integers.

amit_g · Accepted Answer · 2012-01-23T00:44:22.667

2

It seems that the jqChart needs the int as array elements and can't deal with strings. Updated the code as given below.

$.post('database2json.php', function(podaci){
    $.each( podaci, function(i, e) {
        podaci[i][0] = parseInt(e[0]);
        podaci[i][1] = parseInt(e[1]);
    });

    $('#placeholder').jqChart({
        title: { text: 'Chart Title'},
        series: [
            {
                type: 'line',
                data: podaci
            }
        ]
    });
});

edited Jan 23 '12 at 00:44

answered Jan 18 '12 at 22:20

amit_g

30,880
8
61
118

Check the value of podaci on the client side. You can use Firebug on Firefox to debug that. Also try to parse the JSON and see if that helps. – amit_g Jan 18 '12 at 23:13
How to check what I have on client side with Firebug. To type something in console? – Иван Бишевац Jan 22 '12 at 15:20
You could put a breakpoint in the script or do a console.log(podaci) after $.post('database2json.php', function(podaci){... – amit_g Jan 22 '12 at 18:06
I checked with Firebug what is in the response. Those are string pairs. Why is so when in database I have two integers? See my edit 3. – Иван Бишевац Jan 22 '12 at 18:41
If I put console.log($.parseJSON(data)); into jQuery code, then in firebug there is null for this line. – Иван Бишевац Jan 22 '12 at 19:27

score 1 · Answer 2 · answered Jan 19 '12 at 17:58

1

The jqChart data should be in format: ["1", -1] instead of ["1", "-1"].

The second value needs to be numeric.

You can check the documentation as well: jqChart Line Chart

answered Jan 19 '12 at 17:58

Dragan Matek

507
1
3
6

How to pass JSON to jqChart?

2 Answers2