DeltaLima/CanGrow
DeltaLima/CanGrow
0
0
Fork 0
Code Issues26 Pull requests Projects1 Releases7 Packages Wiki Activity

javascript line graph bug / problem solved

Browse source
This commit is contained in:
DeltaLima 2025-04-13 18:13:21 +02:00
parent b34f95c5b6
commit adbf7ccf86
2 changed files with 21 additions and 11 deletions
playground/html/root
cangrow.jsindex.html

16
playground/html/root/cangrow.js
View file

@ -330,15 +330,13 @@ function DrawChart() {
/* check if data is present */
cell[j] = row[i].insertCell(j);
/* check if data[] is present AND check if data[i] is not undefined AND datapoints is smaller then datapointsMax */
if((ChartJson.chart[j].hasOwnProperty('data')) &&
((typeof ChartJson.chart[j].data[i] != 'undefined') &&
(ChartJson.chart[j].datapoints == datapointsMax)
) ||
((ChartJson.chart[j].hasOwnProperty('data')) && (typeof ChartJson.chart[j].data[i] == 'undefined') &&
((ChartJson.chart[j].datapoints < datapointsMax) && (datapointsMax - ChartJson.chart[j].datapoints <= i) )
/* check if data[] is present AND check if data[i] is not undefined AND datapoints is smaller then datapointsMax.
* when datapoints is smaller than dpMAx, calculate an offset to draw the latest data always on the right. */
if((ChartJson.chart[j].hasOwnProperty('data')) &&
((typeof ChartJson.chart[j].data[i] != undefined) && (ChartJson.chart[j].datapoints == datapointsMax)) ||
( ((ChartJson.chart[j].datapoints < datapointsMax) && (datapointsMax - ChartJson.chart[j].datapoints <= i) && ((typeof ChartJson.chart[j].data[i - (datapointsMax - ChartJson.chart[j].datapoints)] != undefined)))
)
) {
) {
/* which element of data[] we want to draw. */
var dataIndex = i;
/* check if datapoints is smaller then datapointsMax and if the difference between them is the actual dataIndex (i) */
@ -374,7 +372,7 @@ function DrawChart() {
} else {
/* data is not present */
cell[j].style['display'] = 'none';
//console.log('no valid data chart ' + j + ' datapoint '+ i);
console.log('no valid data / offset needed, chart ' + j + ' datapoint '+ i);
}
}

16
playground/html/root/index.html
View file

@ -107,6 +107,18 @@ gaugeJS_5_2_1.value('53.90', 100, ' %');
<br>
<script type='application/json' id='chartJson'>{"chart":[{"id":0,"name":"BME280 inside","descr":"Temperature","unit":"°C","data":[19.99,19.84,19.77,19.69,19.64,19.62,19.62,19.64,19.65,19.64,19.68,19.66,19.65,19.64,19.64,19.76,22.54,23.29,23.49,23.7,23.94,23.88,23.81,23.86,23.9,23.9,24.35,25.43,25.91,25.91,25.42,24.02,23.54,23.4,23.72,23.7,23.81,23.6,23.58,23.18,22.96,22.88,22.84,22.81,22.81,22.81,22.75,22.75,22.74,22.63,20.07,19.62,19.54,19.48,19.62],"timestamp":[1744416219,1744417119,1744418019,1744419722,1744421528,1744422875,1744423774,1744424674,1744425574,1744427940,1744429740,1744431540,1744433341,1744435141,1744436941,1744438741,1744440541,1744442341,1744444141,1744445941,1744447741,1744449541,1744451341,1744453141,1744454941,1744456741,1744458541,1744460341,1744462140,1744463940,1744465740,1744467540,1744469340,1744471140,1744472940,1744474740,1744476540,1744478340,1744480140,1744481940,1744483740,1744485540,1744487340,1744489140,1744490940,1744492740,1744494540,1744496340,1744498140,1744499940,1744501740,1744503540,1744505340,1744507140,1744508940],"datapoints":55},{"id":1,"name":"BME280 inside","descr":"Humidity","unit":"%","data":[61.43,62.99,63.62,62.37,63.26,63.21,64.52,66.1,66.74,53.51,52.66,52.26,51.96,51.67,51.36,50.93,45.61,44.06,43.75,43.77,43.75,44.21,44.07,43.79,43.85,43.79,42.8,41.01,39.96,40.75,42.38,42.7,42.57,42.69,43.65,44.92,44.29,45.19,47.33,49.34,49.12,49.12,49.08,49.17,48.81,48.5,48.49,48.28,48.6,48.16,53.27,54.24,54.11,53.71,54.54],"timestamp":[1744416219,1744417119,1744418019,1744419722,1744421528,1744422875,1744423775,1744424675,1744425575,1744427941,1744429741,1744431540,1744433341,1744435141,1744436941,1744438741,1744440541,1744442341,1744444141,1744445941,1744447741,1744449541,1744451341,1744453141,1744454941,1744456741,1744458541,1744460341,1744462141,1744463941,1744465741,1744467541,1744469341,1744471141,1744472941,1744474741,1744476541,1744478341,1744480141,1744481941,1744483741,1744485541,1744487341,1744489141,1744490941,1744492741,1744494541,1744496341,1744498141,1744499941,1744501741,1744503541,1744505341,1744507141,1744508941],"datapoints":55},{"id":2,"name":"SHT30 outside","descr":"Humidity","unit":"%","data":[52.48,52.21,52.27,52.26,51.96,51.58,51.34,51.06,50.89,50.68,50.51,49.29,48.04,47.4,47.44,47.18,47.65,47.68,47.4,47.49,47.51,47.28,46.73,46.72,46.78,47.87,44.58,44.23,44.18,48.54,49,48.94,49.57,53.29,54.93,54.94,54.85,54.44,53.91,53.84,53.27,53.98,53.79,53.04,52.89,54.2,54.27,53.96,53.59,53.89],"timestamp":[1744422875,1744423775,1744424675,1744425575,1744427941,1744429741,1744431541,1744433342,1744435141,1744436941,1744438741,1744440541,1744442341,1744444141,1744445941,1744447741,1744449541,1744451341,1744453141,1744454941,1744456741,1744458541,1744460341,1744462141,1744463941,1744465741,1744467541,1744469341,1744471141,1744472941,1744474741,1744476541,1744478341,1744480141,1744481941,1744483741,1744485541,1744487341,1744489141,1744490941,1744492741,1744494541,1744496341,1744498141,1744499941,1744501741,1744503541,1744505341,1744507141,1744508941],"datapoints":50}]}</script><link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css'><div id='chartDiv'><table id='chartTable' class='charts-css line multiple show-data-on-hover show-primary-axis show-6-secondary-axes'><caption>Linechart</caption></table><ul id='chartLegend' class='charts-css legend legend-line'></ul></div><script>DrawChart();</script>
<script type='application/json' id='chartJson'>{"chart":[{"id":0,"name":"BME280 inside","descr":"Temperature","unit":"°C","data":[19.99,19.84,19.77,19.69,19.64,19.62,19.62,19.64,19.65,19.64,19.68,19.66,19.65,19.64,19.64,19.76,22.54,23.29,23.49,23.7,23.94,23.88,23.81,23.86,23.9,23.9,24.35,25.43,25.91,25.91,25.42,24.02,23.54,23.4,23.72,23.7,23.81,23.6,23.58,23.18,22.96,22.88,22.84,22.81,22.81,22.81,22.75,22.75,22.74,22.63,20.07,19.62,19.54,19.48,19.62],"timestamp":[1744416219,1744417119,1744418019,1744419722,1744421528,1744422875,1744423774,1744424674,1744425574,1744427940,1744429740,1744431540,1744433341,1744435141,1744436941,1744438741,1744440541,1744442341,1744444141,1744445941,1744447741,1744449541,1744451341,1744453141,1744454941,1744456741,1744458541,1744460341,1744462140,1744463940,1744465740,1744467540,1744469340,1744471140,1744472940,1744474740,1744476540,1744478340,1744480140,1744481940,1744483740,1744485540,1744487340,1744489140,1744490940,1744492740,1744494540,1744496340,1744498140,1744499940,1744501740,1744503540,1744505340,1744507140,1744508940],"datapoints":55},{"id":1,"name":"BME280 inside","descr":"Humidity","unit":"%","data":[61.43,62.99,63.62,62.37,63.26,63.21,64.52,66.1,66.74,53.51,52.66,52.26,51.96,51.67,51.36,50.93,45.61,44.06,43.75,43.77,43.75,44.21,44.07,43.79,43.85,43.79,42.8,41.01,39.96,40.75,42.38,42.7,42.57,42.69,43.65,44.92,44.29,45.19,47.33,49.34,49.12,49.12,49.08,49.17,48.81,48.5,48.49,48.28,48.6,48.16,53.27,54.24,54.11,53.71,54.54],"timestamp":[1744416219,1744417119,1744418019,1744419722,1744421528,1744422875,1744423775,1744424675,1744425575,1744427941,1744429741,1744431540,1744433341,1744435141,1744436941,1744438741,1744440541,1744442341,1744444141,1744445941,1744447741,1744449541,1744451341,1744453141,1744454941,1744456741,1744458541,1744460341,1744462141,1744463941,1744465741,1744467541,1744469341,1744471141,1744472941,1744474741,1744476541,1744478341,1744480141,1744481941,1744483741,1744485541,1744487341,1744489141,1744490941,1744492741,1744494541,1744496341,1744498141,1744499941,1744501741,1744503541,1744505341,1744507141,1744508941],"datapoints":55},
{"id":2,"name":"SHT30 outside","descr":"Humidity","unit":"%","data":
[52.48,52.21,52.27,52.26,51.96,51.58,51.34,51.06,50.89,50.68,50.51,49.29,48.04,47.4,47.44,47.18,
47.65,47.68,47.4,47.49,47.51,47.28,46.73,46.72,46.78,47.87,44.58,44.23,44.18,48.54,49,48.94,49.57,
53.29,54.93,54.94,54.85,54.44,53.91,53.84,53.27,53.98,53.79,53.04,52.89,54.2,54.27,53.96,53.59,53.89],
"timestamp":[1744422875,1744423775,1744424675,1744425575,1744427941,1744429741,1744431541,1744433342,1744435141,1744436941,1744438741,
1744440541,1744442341,1744444141,1744445941,1744447741,1744449541,1744451341,1744453141,1744454941,1744456741,1744458541,1744460341,
1744462141,1744463941,1744465741,1744467541,1744469341,1744471141,1744472941,1744474741,1744476541,1744478341,1744480141,1744481941,
1744483741,1744485541,1744487341,1744489141,1744490941,1744492741,1744494541,1744496341,1744498141,1744499941,1744501741,1744503541,
1744505341,1744507141,1744508941],
"datapoints":50}]}</script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css'><div id='chartDiv'><table id='chartTable' class='charts-css line multiple show-data-on-hover show-primary-axis show-6-secondary-axes'><caption>Linechart</caption></table><ul id='chartLegend' class='charts-css legend legend-line'></ul></div><script>DrawChart();</script>
<div class='footer'><span>Build: a9635cc-esp8266_d1_mini_clone-20250412034442</span></div></div></body></html>
<div class='footer'><span>Build: a9635cc-esp8266_d1_mini_clone-20250412034442</span></div></div></body></html>