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:

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.

Answer 1

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
            }
        ]
    });
});