Outputting JSON data to Chart.js labels and data

Question

I'm tring to output JSON data to a Chart using Chart.js, querying a MySQL database for the data.

Basically what I did to query was (data.php):

<?php

header('Content-Type: application/json');

$con = //Database connection

// Check connection
if (mysqli_connect_errno($con))
{
    echo "Failed to connect to DataBase: " . mysqli_connect_error();
}
else
{
    $data_points = array();
    $result = mysqli_query($con, "SELECT * FROM condicao order by id desc limit 10");

    while($row = mysqli_fetch_array($result))
    {        
        $point = array($row['timestamp'], $row['temperatura']);
        array_push($data_points, $point);        
    }

    echo json_encode($data_points, JSON_NUMERIC_CHECK);

}

mysqli_close($con);

?>

Which gave me the following array (timestamp,temperature):

[
    ["2014-08-04 23:06:01",16.9],
    ["2014-08-04 23:03:02",17.1],
    ["2014-08-04 23:00:02",17.1],
    ["2014-08-04 22:57:01",17.1],
    ["2014-08-04 22:54:01",17.1],
    ["2014-08-04 22:51:02",17.1],
    ["2014-08-04 22:48:01",17.2],
    ["2014-08-04 22:45:02",17.2],
    ["2014-08-04 22:42:01",17.2],
    ["2014-08-04 22:39:02",17.2]
]

Now I'm trying to output this to a Chart, but I don't know how to take the first object as the label (timestamp) and the second object as the datapoints (temperature).

Here's the code in which I'm trying to output the Chart:

<script type="text/javascript">
$(document).ready(function() {

    $.getJSON("data.php", function (result) {

        var tempData = {
            labels : result,
            datasets : [{
                fillColor : "rgba(172,194,132,0.4)",
                strokeColor : "#ACC26D",
                pointColor : "#fff",
                pointStrokeColor : "#9DB86D",
                data : result
            }]
        }

        var temp = document.getElementById('compradores').getContext('2d');
        new Chart(temp).Line(tempData);
    });
});
</script>

How can I identify result as the first object for the label (timestamp), and the second object on the array as the datapoints (temperature)?

In the way I'm doing above, I'm getting both timestamp and temperature as the labels.

I've already tried result[0], tried defining a label for the timestamp and calling result['timestamp'] and so on, with no luck.

Thanks!

Answer 1

The issue is you have to provide timeStamp/temperature in separate collection as in labels and dataset associated with it.

Either you can respond back "result" separately into two two arrays like:

     [["16.9", "17.1", "17.1", "17.1", "17.1", "17.1", "17.2", "17.2", "17.2", "17.2"],                                                                  
      ["2014-08-04 23:06:01", "2014-08-04 23:03:02", "2014-08-04 23:00:02", "2014-08-04 22:57:01", "2014-08-04 22:54:01", "2014-08-04 22:51:02", "2014-08-04 22:48:01", "2014-08-04 22:45:02", "2014-08-04 22:42:01", "2014-08-04 22:39:02"]];

And then you can simply do,

    var tempData = {
        labels : result[0],
        datasets : [{
            fillColor : "rgba(172,194,132,0.4)",
            strokeColor : "#ACC26D",
            pointColor : "#fff",
            pointStrokeColor : "#9DB86D",
            data : result[1]
        }]
    };

OR you can convert it into two arrays on front-end side.

For example:

     <script type="text/javascript">
     $(document).ready(function() {

     $.getJSON("data.php", function (result) {

         var labels = [],data=[];
         for(var item in result){
              labels.push(result[item].slice(0,1).toString());
              data.push(result[item].slice(1,2).toString());
          }

    var tempData = {
        labels : labels,
        datasets : [{
            fillColor : "rgba(172,194,132,0.4)",
            strokeColor : "#ACC26D",
            pointColor : "#fff",
            pointStrokeColor : "#9DB86D",
            data : data
        }]
    };

    var temp = document.getElementById('compradores').getContext('2d');
    var lineChart = new Chart(temp).Line(tempData);

     });
 });
 </script>