I am trying to display date on x.axix using chart.js. There are two values that I receive as json from database; timestamp & a sensor read. I want to display a tick of the sensor read against each timestamp in chart. The data is updated periodically each few minutes.
This is format of the timestamp:
2018-12-07 12:45:17
Here is my code for chart so far:
var ctx = document.getElementById ('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: time_Array, // example value 2018-12-07 12:45:17 .......
datasets: [{
label: 'Humidity',
data: meas_value_Array, //// example value 116, 120 110 ....
backgroundColor: "rgba(255,153,0,0.4)"
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}],
xAxes: [{
type: 'time',
time: {
unit: 'minute',
displayFormats: {
second: 'h:MM:SS',
minute: 'h:MM',
hour: 'hA',
day: 'MMM D',
month: 'YYYY MMM',
year: 'YYYY'
},
},
display: true,
scaleLabel: {
display: true,
labelString: 'value'
}
}]
}
}
});
It's raising this error in firefox:
TypeError: i.min is undefined[Learn More] Chart.min.js:14:18390
determineDataLimits
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:14:18390
update
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:13:2110
n
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:23263
[26]</e.exports/o.each
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:8324
update
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:24692
updateLayout
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:11:30363
update
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:11:30126
[23]</e.exports/t.Controller
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:11:27625
t
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js:12:22144
dspChrt3
While chrome shows this error:
Uncaught TypeError: Cannot read property 'call' of undefined
at a.determineDataLimits (Chart.min.js:14)
at a.update (Chart.min.js:13)
at n (Chart.min.js:12)
at Object.o.each (Chart.min.js:12)
at Object.update (Chart.min.js:12)
at t.Controller.updateLayout (Chart.min.js:11)
at t.Controller.update (Chart.min.js:11)
at new t.Controller (Chart.min.js:11)
at new t (Chart.min.js:12)
at dspChrt3 (chart3.php:30)
Here is code snippet where I tried to add array values hard code:
var time_Array = ["2018-12-07 15:45:17", "2018-12-07 15:30:17", "2018-12-07 15:15:16", "2018-12-07 15:00:17", "2018-12-07 14:45:16", "2018-12-07 14:30:17", "2018-12-07 14:15:17", "2018-12-07 14:00:17", "2018-12-07 13:45:17", "2018-12-07 13:30:16", "2018-12-07 13:15:17", "2018-12-07 16:00:17"];
var meas_value_Array = [121, 121, 121, 121, 121, 121, 121, 121, 121, 121, 121, 121];
//console.log(time_Array);
//console.log(meas_value_Array);
var ctx = document.getElementById ('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: time_Array,
datasets: [{
label: 'Humidity',
data: meas_value_Array,
backgroundColor: "rgba(255,153,0,0.4)"
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}],
xAxes: [{
type: 'time',
time: {
unit: 'minute',
displayFormats: {
second: 'h:MM:SS',
minute: 'h:MM',
hour: 'hA',
day: 'MMM D',
month: 'YYYY MMM',
year: 'YYYY'
},
},
display: true,
scaleLabel: {
display: true,
labelString: 'value'
}
}]
}
}
});
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<html>
<meta charset="utf-8">
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<body>
<canvas id="myChart"></canvas>
</body>
</html>
Here is my whole JS code:
var Device_Data;
var temperature, meas_value;
function dspChrt3(Device_Data) {
//console.log(Device_Data);
var time_Array = [];
var meas_value_Array = [];
for(var i=0; i<Device_Data.length; i++) {
time_Array.push(Device_Data[i].date_time);
meas_value_Array.push(Device_Data[i].meas_value);
}
console.log(Device_Data[0].date_time);
console.log(Device_Data[1].meas_value);
date_time = Device_Data[0].date_time;
meas_value = Device_Data[1].meas_value;
time_Array.shift();
time_Array.push(date_time);
meas_value_Array.shift();
meas_value_Array.push(meas_value);
//console.log(time_Array);
//console.log(meas_value_Array);
var ctx = document.getElementById ('myChart11').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: time_Array,
datasets: [{
label: 'Humidity',
data: meas_value_Array,
backgroundColor: "rgba(255,153,0,0.4)"
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}],
xAxes: [{
type: 'time',
time: {
unit: 'minute',
displayFormats: {
second: 'h:MM:SS',
minute: 'h:MM',
hour: 'hA',
day: 'MMM D',
month: 'YYYY MMM',
year: 'YYYY'
},
},
display: true,
scaleLabel: {
display: true,
labelString: 'value'
}
}]
}
}
});
}
If I have understood you correctly then you just want the x-axis to be a date so 2018-12-07 15:45:17. I have managed to get that. Here is the entire code I have. Haven't used chart.js before and haven't got much time to look properly but look at the displayFormats and change how you want. Hope this helps.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
$(document).ready(function(){
var time_Array = ["2018-12-07 15:45:17", "2018-12-07 15:30:17", "2018-12-07 15:15:16", "2018-12-07 15:00:17", "2018-12-07 14:45:16", "2018-12-07 14:30:17", "2018-12-07 14:15:17", "2018-12-07 14:00:17", "2018-12-07 13:45:17", "2018-12-07 13:30:16", "2018-12-07 13:15:17", "2018-12-07 16:00:17"];
var meas_value_Array = [121, 121, 121, 121, 121, 121, 121, 121, 121, 121, 121, 121];
//console.log(time_Array);
//console.log(meas_value_Array);
var ctx = document.getElementById ('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: time_Array,
datasets: [{
label: 'Humidity',
data: meas_value_Array,
backgroundColor: "rgba(255,153,0,0.4)"
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}],
xAxes: [{
type: 'time',
time: {
parser: 'YYYY-MM-DD HH:mm:ss',
unit: 'minute',
displayFormats: {
'minute': 'YYYY-MM-DD HH:mm:ss',
'hour': 'YYYY-MM-DD HH:mm:ss'
}
},
ticks: {
source: 'data'
}
}]
}
}
});
});
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With