Home forums Using CanvasJS Dynamically build a linear chart from JSON with date? Reply To: Dynamically build a linear chart from JSON with date?

#17529

MikeWS
Member

I’m trying to build a temperature over time line graph.
I can almost get it to work, the problem with using MySQL + PHP + JSON is parsing the time in hh:mm format via JSON. Parsing time as a unix timestamp works but I can’t change the format to hh:mm. Maybe it’s a basic issue of JSON wanting numerals not strings.

Can anyone suggest a way to do this?

Currently the MySQL query and $dataPoints array are built using this:

if(mysqli_num_rows($result_set) > 0){
while ($row = mysqli_fetch_assoc($result_set)) {
$tempF = $row[“outTemp”];
$tempC = ($tempF-32)/1.8;
$tempDateTime = date(‘H:i’, $row[“dateTime”]);
// $tempDateTime = $row[“dateTime”]; //This works- $tempDateTime seen as a numeral, not a string.
echo sprintf(‘%s %0.1f℃’, $tempDateTime, $tempC );
array_push($dataPoints, array(“x” => $tempDateTime, “y” => $tempC));
}
}

And the script is the standard ChartJS example code:
$(function () {
var chart = new CanvasJS.Chart(“chartContainer”, {
theme: “theme2”,
zoomEnabled: true,
animationEnabled: true,
title: {
text: “Performance Demo – 10000 DataPoints”
},
subtitles:[
{ text: “(Try Zooming & Panning)” }
],
data: [
{
type: “spline”,
dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
}
]
});
chart.render();
});

Can anyone suggest a way to parse time information from PHP to javascript via JSON?

Thanks in advance,
Mike