How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS

Question

a sensor device (temperature sensor) is sending data to database every 10 seconds. I have to plot a graph between time and temperature for one day(latest data). i managed to get data from database. The problem is As I have huge amount of time data as well how to use it to label the Y- axis. date and time is in the form of 2019-04-09 12:28:36. But I can extract the time. But still how to use the time in one (Y)axis. My code shows error Uncaught SyntaxError: Unexpected token :

//php

$sql = "SELECT TIME(Date_Time) as TIME , Temperature FROM dataTable WHERE Date_Time>= (CURDATE() - INTERVAL 1 DAY )  ORDER BY Date_Time DESC ";

$result = $conn->query($sql);
  if ($result->num_rows > 0) {

   while($row = $result->fetch_assoc()) {
     $tempValue =$row['Temperature'];
     $timeInterval=$row['TIME'];

     $tempValues =$tempValues. $tempValue. ',';
     $timeIntervals =$timeIntervals. $timeInterval. ',';
    }
$tempValues =trim ($tempValues, ",");
$timeIntervals= trim ($timeIntervals,"," );

//Javascript

var myChart = document.getElementById('myChart').getContext('2d');




        var data = {
            datasets: [{

            data: [<?php  echo $tempValues ?>],
            backgroundColor: 'transparent',
            borderColor:'rgba(255,99,132)',
            borderWidth:5,
            label: 'Temperature in degree'
          }],

//error in the following line !
          labels: [<?php  echo $timeIntervals ?>]
        };

        var particleChart =new Chart(myChart, {
          type:'line',
          data: data
        });

You have that error because labels: [<?php echo $timeIntervals ?>] is not valid syntax. Try get the data by storing it in the DOM (as JSON) or through AJAX. — Script47
– Script47, Commented Apr 9, 2019 at 13:51

Paolo · Accepted Answer · 2019-04-09 14:38:43Z

4

The label must be a string. Build up $timeIntervals this way...

$timeIntervals = $timeIntervals . '"' . $timeInterval . '",';

...in order to have the date-time values wrapped between double quotes.

answered Apr 9, 2019 at 14:38

Paolo

15.9k28 gold badges73 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

master_yoda Over a year ago

wow. it works like a champ. Thank you so much. how to specify ChartJs to choose a proper time scale. As i am getting new value from sensor in every 10 seconds, seems like Y axis is a bit over crowded.

Collectives™ on Stack Overflow

How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related