Hallo i have this problem with my code that it is creating a forced reflow when the clock hits 24:00. The code is supposed to send a ajax request to a esp32 at start to retrieve som temperture reading and the send a request for a single value each minute, but it crashes at 24:00.
I am not that experienced in web applications so i need help fixing it. My code can be seen here.
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.highcharts.com/highcharts.js"></script>
<style>
h2 {
font-family: Arial;
font-size: 2.5rem;
text-align: center;
}
</style>
</head>
<p id="demo"></p>
<body>
<h2>DASH BOARD</h2>
<div id="chart-temperature" class="container"></div>
<p id="demo"></p>
<p id="demo2"></p>
</body>
<script>
var Json;
var d = new Date();
var h = d.getHours();
var c = d.getMinutes();
var chartT = new Highcharts.Chart({
chart:{
renderTo : 'chart-temperature',
type: 'line',
zoomType: 'x',
panning: true,
panKey: 'shift'
},
tooltip: {
dateTimeLabelFormats: {
millisecond: "%A, %b %e, %H:%M"
}
},
title: { text: 'temperature' },
series: [{
name: 'TEMP1',
showInLegend: true,
connectNulls: true,
data: [],
color: '#FF0000'
}, {
name: 'TEMP2',
connectNulls: true,
data:[],
color: '#4572A7'
},
{
name: 'TEMP3',
connectNulls: true,
data:[],
color: '#000000'
},
{
name: 'TEMP4',
connectNulls: true,
data:[],
color: '#0000FF'
},
{
name: 'TEMP5',
connectNulls: true,
data:[],
color: '#6600FF'
}],
plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
},
},
xAxis: { type: 'datetime',
dateTimeLabelFormats: { second: '%H:%M:%S' },
min: Date.UTC(0,0,0,h,c-120,0), tickInterval: 30*60*1000, max: Date.UTC(0,0,0,h,c,0)
},
yAxis: {
title: { text: 'Temperature (Celsius)' },
//title: { text: 'Temperature (Fahrenheit)' }
},
credits: { enabled: false }
});
Highcharts.setOptions({
time: {
useUTC: true
}
});
function loadall(){
var z
var m;
var tid;
var y1;
var y;
var just;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
if(chartT.series[0].data.length == 0){
y1 = this.responseText;
y = JSON.parse(y1);
just = y.temp1.length;
for (let i = 0; i < just; i++) {
tid = Date.UTC(0,0,0,h,(c-i),0);
z = just-i-1;
chartT.series[0].addPoint([tid, y.temp1[z]], true, false, false);
chartT.series[1].addPoint([tid, y.temp2[z]], true, false, false);
chartT.series[2].addPoint([tid, y.temp3[z]], true, false, false);
chartT.series[3].addPoint([tid, y.temp4[z]], true, false, false);
chartT.series[4].addPoint([tid, y.temp5[z]], true, false, false);
}
}
}
}
xhttp.open("POST", "TEMP", true);
xhttp.send();
}
function Load(serie,sensor,tid){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
var y = parseFloat(this.responseText);
if (this.readyState == 4 && this.status == 200) {
if(chartT.series[0].data.length > 120) {
chartT.series[serie].addPoint([tid, y], true, false, false);
} else {
chartT.series[serie].addPoint([tid, y], true, true, false);
}
}
}
xhttp.open("GET", sensor, false);
xhttp.send();
}
loadall();
setInterval(function(){
d = new Date();
h = d.getHours();
c = d.getMinutes();
chartT.xAxis[0].update({
max: Date.UTC(0,0,0,h,c,0),
min: Date.UTC(0,0,0,h,c-120,0)
});
Load(0,"temp1",Date.UTC(0,0,0,h,c,0));
Load(1,"temp2",Date.UTC(0,0,0,h,c,0));
Load(2,"temp3",Date.UTC(0,0,0,h,c,0));
Load(3,"temp4",Date.UTC(0,0,0,h,c,0));
Load(4,"temp5",Date.UTC(0,0,0,h,c,0));
}, 60000);
</script>
</html>The things that is happening in the consol can be seen here.
(index):119 XHR finished loading: POST "http://192.168.1.111/TEMP".
loadall @ (index):119
(anonymous) @ (index):136
(index):100 [Violation] 'readystatechange' handler took 8260ms
[Violation] Forced reflow while executing JavaScript took 1564ms
favicon.ico:1 GET http://192.168.1.111/favicon.ico 500 (Internal Server Error)
[Violation] 'setInterval' handler took <N>ms
[Violation] 'setInterval' handler took <N>ms
[Violation] 'setInterval' handler took <N>ms
[Violation] 'setInterval' handler took <N>ms
[Violation] 'setInterval' handler took <N>ms
[Violation] 'setInterval' handler took <N>ms
[Violation] 'setInterval' handler took <N>ms
[Violation] 'setInterval' handler took <N>ms
[Violation] 'setInterval' handler took <N>ms
[Violation] 'setInterval' handler took <N>ms
[Violation] 'setInterval' handler took <N>ms
[Violation] 'setInterval' handler took <N>ms
[Violation] 'setInterval' handler took <N>ms
[Violation] 'setInterval' handler took <N>ms
[Violation] 'setInterval' handler took <N>ms
[Violation] 'setInterval' handler took <N>ms
[Violation] 'setInterval' handler took <N>ms
[Violation] 'setInterval' handler took <N>ms
(index):123 [Violation] 'setInterval' handler took 196ms
(index):123 [Violation] 'setInterval' handler took 106ms
(index):123 [Violation] 'setInterval' handler took 131ms
(index):123 [Violation] 'setInterval' handler took 125ms
(index):123 [Violation] 'setInterval' handler took 138ms
(index):137 [Violation] 'setInterval' handler took 1445ms
(index):123 [Violation] 'setInterval' handler took 111ms
(index):123 [Violation] 'setInterval' handler took 91ms
(index):123 [Violation] 'setInterval' handler took 96ms
(index):123 [Violation] 'setInterval' handler took 82ms
(index):123 [Violation] 'setInterval' handler took 96ms
(index):137 [Violation] 'setInterval' handler took 1376ms
(index):123 [Violation] 'setInterval' handler took 174ms
(index):123 [Violation] 'setInterval' handler took 151ms
(index):123 [Violation] 'setInterval' handler took 87ms
(index):123 [Violation] 'setInterval' handler took 145ms
(index):123 [Violation] 'setInterval' handler took 54ms
(index):137 [Violation] 'setInterval' handler took 1607ms
XHR finished loading: GET "<URL>".
XHR finished loading: GET "<URL>".
XHR finished loading: GET "<URL>".
XHR finished loading: GET "<URL>".
XHR finished loading: GET "<URL>".
XHR finished loading: GET "<URL>".
XHR finished loading: GET "<URL>".
XHR finished loading: GET "<URL>".
XHR finished loading: GET "<URL>".
XHR finished loading: GET "<URL>".
XHR finished loading: GET "<URL>".
XHR finished loading: GET "<URL>".
XHR finished loading: GET "<URL>".
XHR finished loading: GET "<URL>".
XHR finished loading: GET "<URL>".
[Violation] Forced reflow while executing JavaScript took 86ms