Question

I made a form for displaying a user statistic diagram. The user need to choose month and year and then the diagram will be displayed.

I did this with AJAX and made a JSON response.

This is my JavaScript Code:

//Show statistic
$('.statistic_submit').click(function(){
    if ($('#month').val() == 'none' || $('#year').val() == 'none') {
        $("#dialog_empty").dialog( "open" );
        return false;
    }

    var form = $('#statistic_view');  
    var data = form.serialize(); 

    $.ajax({
        url: "include/scripts/user_statistic.php",
        type: "POST",
        data: data,
        dataType: 'json',
        success: function (reqCode) {
            console.log(reqCode);
            if (reqCode['error_code'] == 1) {
                //Generate diagram  
                $(".done").html( 
                    '<p class="bold center">' + reqCode['month'] + ' ' + reqCode['year'] + '</p>' +
                    '<canvas id="cvs" width="650" height="250">[No canvas support]</canvas>'
                );  

                var data_string = jQuery.parseJSON(reqCode['data_string']);
                var labels_tooltip = jQuery.parseJSON(reqCode['labels_tooltip']);
                var labels_string = reqCode['labels_string'];

                var chart = new RGraph.Line('cvs', data_string);
                    chart.Set('chart.tooltips', labels_tooltip);
                    chart.Set('chart.tooltips.effect', "expand");
                    chart.Set('chart.background.grid.autofit', true);
                    chart.Set('chart.gutter.left', 35);
                    chart.Set('chart.gutter.right', 5); 
                    chart.Set('chart.hmargin', 10);
                    chart.Set('chart.tickmarks', 'circle');
                    chart.Set('chart.labels', labels_string);
                    chart.Draw();

                $('.done').fadeOut('slow'); 
                $('.done').fadeIn('slow');
            }
            if (reqCode['error_code'] == 2) {
                //No values found
                $('.done').fadeOut('slow');
                $("#dialog_error").dialog( "open" );
            }
        }
    });
    return false;
});

This is an extraction of my user_statistic.php:

$data = array();
$sql = "SELECT
                Anzahl
            FROM
                 Counter
            WHERE
                 YEAR(Datum) = '".$year."' AND
                 MONTH(Datum) = '".$month."'";

    if (!$result = $db->query($sql)) {
        return $db->error;
    }

    $row = $result->fetch_assoc();
    $data = (int)$row['Anzahl'];

$response['error_code'] = '1'; 
    $response['data_string'] = "[" . join(", ", $data) . "]";
    $response['labels_string'] = "['" . join("', '", $labels) . "']";
    $response['labels_tooltip'] = "['" . join("', '", $data) . "']";
    $response['month'] = $month_name[$month];
    $response['year'] = $year;

    echo json_encode($response);

This reqCode response:

error_code "1"
data_string "[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 2, 2, 0, 26, 1, 5, 3, 1, 1, 0, 0, 0, 0, 0, 0]"  
labels_string "['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']" 
labels_tooltip "['0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '3', '2', '2', '0', '26', '1', '5', '3', '1', '1', '0', '0', '0', '0', '0', '0']" 
month "Mai" 
year 2012

This is what the .log says:

JSON.parse: unexpected character!

I found out that data_string is working fine. labels_string and labels_tooltip is the problem because of the ‘..’. The only thing is that the diagram needs the ‘..’.

I’m new to JavaScript and Ajax/JSON so I dont know how to handle this. In php I would use an array[][] and make a loop. For example:

echo "[";
for ($i; $i<= ..;$i++) {
  echo "'".reqCode['labels_string'][$i]."', ";
}
echo"]";

Any suggestion?

Answer 1

The problem comes from parsing single quotes '. JSON uses double quotes " for setting the string value. So, your valid stringified JSON response should look like "[\"1\",\"2\", ...]", while your "['1','2', ...]" is incorrect.

In fact, I didn’t get why you do such things:

$response['data_string'] = "[" . join(", ", $data) . "]";

if you finally use json_encode($response).

Actually, PHP function json_encode() will successfully stringify your $response array even if some elements contain other arrays.

So, you can simply use

$response['data_string'] = $data;

And then, on the client side, there won’t be a need to parse the string with parseJSON method. You will only need to get it as such:

var data_string = reqCode['data_string'];

If you need to pass $data array with string elements inside, you can either create a new array or use something like that:

array_filter($data, create_function('$x', 'return strval($x)'));