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

chart javascript wip playground

Browse source
This commit is contained in:
DeltaLima 2025-04-10 23:14:22 +02:00
parent 49be47e9e1
commit 10a3380722
2 changed files with 63 additions and 76 deletions
playground/html/root
cangrow.jsindex.html

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

@ -291,87 +291,74 @@ return exports;
/* chart data fetch */
function GetChartJson(callback) {
//let path = '/api/chart/';
let path = 'chart.json';
//let path = '/api/sensor/raw_' + sensor + '_' + reading;
var xobj = new XMLHttpRequest();
xobj.overrideMimeType('application/json');
xobj.open('GET', path, true);
xobj.onreadystatechange = function() {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
}
}
xobj.send(null);
}
/* propably not the best place, but this as global as it can get i guess */
var ChartJson;
function ChartJsonRefresh() {
GetChartJson(function(response) {
/* needs to be a global */
ChartJson = JSON.parse(response);
});
//console.log('Refresh SensorJson');
}
function DrawChart() {
//let element = 'debugSpan';
//document.getElementById(element).textContent = ChartJson.chart.length;
/* get no of charts */
chartSum = ChartJson.chart.length;
const datapointsSum = [];
var datapointsMax = 0;
//function loadJSON(url) {
//}
/* get highest number of datapoints */
for(let i = 0; i < chartSum; i++) {
if(ChartJson.chart[i].datapoints > datapointsMax) {
datapointsMax = ChartJson.chart[i].datapoints;
}
}
/* https://www.w3schools.com/jsref/met_table_insertrow.asp */
var row = [];
/* store previous datapoint for chartcss line chart , array index is chart id */
var previousData = [];
/* fill with 0 */
for(let i = 0; i < chartSum; i++) {
previousData[i] = 0;
}
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")) {
cell[j] = row[i].insertCell(j);
cell[j].innerHTML = '<span class=\'data minw\'> ' + ChartJson.chart[j].data[i] + '</span>';
/* add chartscss styles for line chart */
/* build the css string in a var first */
let cssString;
/* when it is the first data point, dont draw --start */
if(i == 0) {
cssString = '--start: calc( ' + ChartJson.chart[j].data[i] + ' / 100); --end: calc( ' + ChartJson.chart[j].data[i] + ' / 100);';
} else {
cssString = '--start: calc( ' + previousData[j] + ' / 100); --end: calc( ' + ChartJson.chart[j].data[i] + ' / 100);';
fetch('chart.json')
.then(function(res) { return res.json(); })
.then(function(ChartJson) {
//document.getElementById('content').innerHTML = JSON.stringify(data);
//let element = 'debugSpan';
//document.getElementById(element).textContent = ChartJson.chart.length;
/* get no of charts */
chartSum = ChartJson.chart.length;
const datapointsSum = [];
var datapointsMax = 0;
/* get highest number of datapoints */
for(let i = 0; i < chartSum; i++) {
if(ChartJson.chart[i].datapoints > datapointsMax) {
datapointsMax = ChartJson.chart[i].datapoints;
}
cell[j].style.cssText = cssString;
/* store datapoint as previous data */
previousData[j] = ChartJson.chart[j].data[i];
} else {
//console.log('Chart ID ' + j + 'does not have any data')
}
}
}
/* https://www.w3schools.com/jsref/met_table_insertrow.asp */
var row = [];
/* store previous datapoint for chartcss line chart , array index is chart id */
var previousData = [];
/* fill with 0 */
for(let i = 0; i < chartSum; i++) {
previousData[i] = 0;
}
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')) && (typeof ChartJson.chart[j].data[i] != 'undefined')) {
console.log('Chart ID ' + j + ' HAS data '+ i)
cell[j] = row[i].insertCell(j);
cell[j].innerHTML = '<span class=\'data minw\'> ' + ChartJson.chart[j].data[i] + '</span>';
/* add chartscss styles for line chart */
/* build the css string in a var first */
let cssString;
/* when it is the first data point, dont draw --start */
if(i == 0) {
cssString = '--start: calc( ' + ChartJson.chart[j].data[i] + ' / 100); --end: calc( ' + ChartJson.chart[j].data[i] + ' / 100);';
} else {
cssString = '--start: calc( ' + previousData[j] + ' / 100); --end: calc( ' + ChartJson.chart[j].data[i] + ' / 100);';
}
cell[j].style.cssText = cssString;
/* store datapoint as previous data */
previousData[j] = ChartJson.chart[j].data[i];
} else {
console.log('Chart ID ' + j + ' P ' + i + ' does NOT have any data')
}
}
}
});
}

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

@ -123,6 +123,6 @@ gaugeJS_6_2_0.value('542.00', 2, ' ppm');
<br>
<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>#chartDiv { width: 100%; max-width: 640px; margin: 0 auto; .minw { min-width: 140px; max-width: 320px; text-align: center; }}</style><button onClick='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>DrawChart();</script>
<div class='footer'><span>Build: 46311d5-esp8266_d1_mini_clone-20250410031539</span></div></div></body></html>