MYSQL Temperature Data with Time live chart

[Sundara Murthy S]

How to display time value form json_encode(dataPoints) in X Axis.
the data are fetched from Mysql.

[Indranil]

@sundara-murthy-s,

You can fetch the date-time in timestamp format with its corresponding y value, parse it into format CanvasJS accepts and use the same to render the chart. Please take a look at this example to render chart from timestamp in PHP.

___________
Indranil Deo
Team CanvasJS

[Sundara Murthy S]

Herewith,
pls refer this image of My output https://imgur.com/a/1vmfrJ7.

still im getting the same result after giving xValueType.
i am getting temp value and time in unixtimeform (integer).
<script>
window.onload = function () {

var chart = new CanvasJS.Chart(“chartContainer”, {
animationEnabled: true,
exportEnabled: true,
theme: “light1”, // “light1”, “light2”, “dark1”, “dark2”
title:{
text: “PHP Line Chart from Database”
},
axisX:{
title: “time”,

labelAngle: -60
},
data: [{type: “line”, xValueFormatString: “HH mm ss”, xValueType:”datetime”, dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>}]
});
chart.render();

}
</script>

[Indranil]

@sundara-murthy-s,

There seems to be a typo, please try changing the value of xValueType from “datetime” to “dateTime”.

You may need to convert PHP timestamp to JavaScript timestamp as PHP timestamp is in seconds and JavaScript timestamp is in milliseconds. Please refer this stackoverflow thread for more info.

___________
Indranil Deo
Team CanvasJS

[Sundara Murthy S]

Thank you so much It works fine. Once again thank you for ur immediate reply.

[Sundara Murthy S]

Is it possible to fix the Xaxis label like with fixed interval for example in hour, 1:00 2:00 3:00 ….. 24:00 format for live chart ? Where x, y values from database are live value. pls give ur suggestion.

[Indranil]

@sundara-murthy-s,

You can customize interval according to your requirements by setting interval and intervalType properties. Please refer documentation for more customization options available.

___________
Indranil Deo
Team CanvasJS