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

updated playground for root chart page stuff

Browse source
This commit is contained in:
DeltaLima 2025-04-10 13:30:43 +02:00
parent 6af92aa7d8
commit 49be47e9e1
3 changed files with 19 additions and 58 deletions
playground/html/root
cangrow.jschart.jsonindex.html

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

@ -286,6 +286,8 @@ return exports;
};
/* chartscss javascript stuff */
/* chart data fetch */
@ -312,13 +314,13 @@ function ChartJsonRefresh() {
/* needs to be a global */
ChartJson = JSON.parse(response);
});
console.log('Refresh SensorJson');
//console.log('Refresh SensorJson');
}
function DrawChart() {
let element = 'debugSpan';
document.getElementById(element).textContent = ChartJson.chart.length;
//let element = 'debugSpan';
//document.getElementById(element).textContent = ChartJson.chart.length;
/* get no of charts */
chartSum = ChartJson.chart.length;
@ -340,14 +342,14 @@ function DrawChart() {
for(let i = 0; i < chartSum; i++) {
previousData[i] = 0;
}
var table = document.getElementById('tbl_chart0');
var table = document.getElementById('chartTable');
for(let i = 0; i < datapointsMax; i++) {
row[i] = table.insertRow(i);
var cell = [];
for(let j = 0; j < chartSum; j++) {
/* check if data is present */
if((ChartJson.chart[j].hasOwnProperty('data')) && (ChartJson.chart[j].data[i] != "undefined")) {
if((ChartJson.chart[j].hasOwnProperty('data')) || (ChartJson.chart[j].data[i] != "undefined")) {
cell[j] = row[i].insertCell(j);
cell[j].innerHTML = '<span class=\'data minw\'> ' + ChartJson.chart[j].data[i] + '</span>';
@ -372,3 +374,5 @@ function DrawChart() {
}
}

2
playground/html/root/chart.json
View file

File diff suppressed because one or more lines are too long

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

@ -13,7 +13,7 @@
<li><a class='' href='/system/' >&#9881; System settings</a></li>
<li><a class='' href='/wifi/' >&#128225; WiFi settings</a></li>
<li><a class='' href='/help' >&#x2753; Help</a></li>
<li><span class='navTime'>23:03:31</span></li>
<li><span class='navTime'>11:30:00</span></li>
<li><a href='https://git.la10cy.net/DeltaLima/CanGrow' target='_blank'>CanGrow v0.2-dev3</a></li>
</ul>
<div class='center'>
@ -108,64 +108,21 @@
</div>
</div><div style='clear: both;'></div>
<script>var gaugeJS_1_0_0 = new Gauge(document.getElementById('gauge_1_0_0'));
gaugeJS_1_0_0.value('9.00', 2, ' %');
gaugeJS_1_0_0.value('10.00', 2, ' %');
var gaugeJS_2_1_0 = new Gauge(document.getElementById('gauge_2_1_0'));
gaugeJS_2_1_0.value('20.80', 2, ' °C');
gaugeJS_2_1_0.value('21.30', 2, ' °C');
var gaugeJS_3_1_1 = new Gauge(document.getElementById('gauge_3_1_1'));
gaugeJS_3_1_1.value('38.73', 2, ' %');
gaugeJS_3_1_1.value('35.72', 2, ' %');
var gaugeJS_4_1_2 = new Gauge(document.getElementById('gauge_4_1_2'));
gaugeJS_4_1_2.value('101.54', 2, ' Pa');
gaugeJS_4_1_2.value('101.78', 2, ' Pa');
var gaugeJS_5_1_3 = new Gauge(document.getElementById('gauge_5_1_3'));
gaugeJS_5_1_3.value('-17.87', 2, ' m');
gaugeJS_5_1_3.value('-37.84', 2, ' m');
var gaugeJS_6_2_0 = new Gauge(document.getElementById('gauge_6_2_0'));
gaugeJS_6_2_0.value('497.00', 2, ' ppm');
gaugeJS_6_2_0.value('542.00', 2, ' ppm');
</script>
<br>
<script>ChartJsonRefresh(); DrawChart();</script>
<button onClick='DrawChart();'>Go</button>
<span id='debugSpan'>Debug</span>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css'><style>#chartDiv { width: 100%; max-width: 640px; margin: 0 auto; .minw { min-width: 140px; max-width: 320px; text-align: center; }}</style><button onClick='ChartJsonRefresh(); DrawChart();'>Go</button><div id='chartDiv'><table id='chartTable' class='charts-css line multiple show-data-on-hover show-heading show-primary-axis show-data-axes show-10-secondary-axes'><caption>Linechart</caption></table></div><script>ChartJsonRefresh(); DrawChart();</script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css'>
<style>
#chart0 { width: 100%; max-width: 640px; margin: 0 auto;
.minw { min-width: 140px; max-width: 320px; text-align: center; }}
</style>
<div id='chart0'>
<table id='tbl_chart0' class='charts-css line multiple show-data-on-hover show-heading show-primary-axis show-data-axes show-10-secondary-axes'>
<!-- <caption>Linechart</caption>
<tr>
<td style='--start: calc( 0.00 / 100); --end: calc( 41.35 / 100);'><span class='data minw'>2025-04-09<br>41.35</span></td>
</tr>
<tr>
<td style='--start: calc( 41.35 / 100); --end: calc( 44.11 / 100);'><span class='data minw'>2025-04-09<br>44.11</span></td>
</tr>
<tr>
<td style='--start: calc( 44.11 / 100); --end: calc( 39.02 / 100);'><span class='data minw'>2025-04-09<br>39.02</span></td>
</tr>
<tr>
<td style='--start: calc( 39.02 / 100); --end: calc( 39.71 / 100);'><span class='data minw'>2025-04-09<br>39.71</span></td>
</tr>
<tr>
<td style='--start: calc( 39.71 / 100); --end: calc( 39.29 / 100);'><span class='data minw'>2025-04-09<br>39.29</span></td>
</tr>
<tr>
<td style='--start: calc( 39.29 / 100); --end: calc( 38.94 / 100);'><span class='data minw'>2025-04-09<br>38.94</span></td>
</tr>
<tr>
<td style='--start: calc( 38.94 / 100); --end: calc( 38.55 / 100);'><span class='data minw'>2025-04-09<br>38.55</span></td>
</tr>
<tr>
<td style='--start: calc( 38.55 / 100); --end: calc( 39.24 / 100);'><span class='data minw'>2025-04-09<br>39.24</span></td>
</tr>
<tr>
<td style='--start: calc( 39.24 / 100); --end: calc( 39.19 / 100);'><span class='data minw'>2025-04-09<br>39.19</span></td>
</tr>
<tr>
<td style='--start: calc( 39.19 / 100); --end: calc( 39.02 / 100);'><span class='data minw'>2025-04-09<br>39.02</span></td>
</tr>
-->
</table></div>
<div class='footer'><span>Build: 1cc01bb-esp8266_d1_mini_clone-20250410010138</span></div></div></body></html>
<div class='footer'><span>Build: 46311d5-esp8266_d1_mini_clone-20250410031539</span></div></div></body></html>