chart graphs working - yaay
This commit is contained in:
parent
4607d47818
commit
76bcc36a2f
3 changed files with 99 additions and 84 deletions
include/Webserver
|
|
@ -405,6 +405,17 @@ a.disabled {
|
|||
}
|
||||
|
||||
|
||||
#chartDiv {
|
||||
width: 100%%;
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
.minw {
|
||||
min-width: 140px;
|
||||
max-width: 320px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
)";
|
||||
|
||||
|
|
|
|||
|
|
@ -297,94 +297,90 @@ return exports;
|
|||
|
||||
/* chartscss javascript stuff */
|
||||
|
||||
|
||||
/* 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;
|
||||
|
||||
/* 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('/api/chart/')
|
||||
.then(function(res) { return res.json(); })
|
||||
.then(function(ChartJson) {
|
||||
/* 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')
|
||||
/* we are already interating through available charts, so we draw at this point the legend as well */
|
||||
var ul = document.getElementById("chartLegend");
|
||||
var li = document.createElement("li");
|
||||
li.appendChild(document.createTextNode(ChartJson.chart[i].descr + ' (' + ChartJson.chart[i].name + ')'));
|
||||
ul.appendChild(li);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
/* 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 */
|
||||
cell[j] = row[i].insertCell(j);
|
||||
if((ChartJson.chart[j].hasOwnProperty('data')) && (typeof ChartJson.chart[j].data[i] != 'undefined')) {
|
||||
// Create a new JavaScript Date object based on the timestamp
|
||||
// multiplied by 1000 so that the argument is in milliseconds, not seconds
|
||||
var timestamp = new Date(ChartJson.chart[j].timestamp[i] * 1000);
|
||||
|
||||
// Hours part from the timestamp
|
||||
//var hours = date.getHours();
|
||||
|
||||
// Minutes part from the timestamp
|
||||
//var minutes = "0" + date.getMinutes();
|
||||
|
||||
// Seconds part from the timestamp
|
||||
//var seconds = "0" + date.getSeconds();
|
||||
|
||||
// Will display time in 10:30:23 format
|
||||
//var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
|
||||
|
||||
let strTimestamp = timestamp.toLocaleDateString('de-DE', {day: 'numeric', month: 'numeric', year: 'numeric'}) + ' ' + timestamp.toLocaleTimeString('de-DE');
|
||||
|
||||
cell[j].innerHTML = '<span class=\'data minw\'> ' + strTimestamp + '<br>' + ChartJson.chart[j].data[i] + ' ' + ChartJson.chart[j].unit + '</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 {
|
||||
/* data is not present */
|
||||
cell[j].style['display'] = 'none';
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
)";
|
||||
|
||||
void WebFile_cangrow_JS(AsyncWebServerRequest *request) {
|
||||
|
|
|
|||
|
|
@ -152,11 +152,19 @@ String Proc_WebPage_root(const String& var) {
|
|||
} else if(var == "CHART") {
|
||||
String html;
|
||||
|
||||
/* FOR TESTING ONLY - INCLUDE EXTERNAL CSSCHARTS*/
|
||||
html += F("<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>");
|
||||
html += F("<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>");
|
||||
byte chartCount = 0;
|
||||
for(byte i = 0; i < Max_Dashboard_Chart; i++) {
|
||||
if(config.grow.dashboard.chartConfigured[i] == true)
|
||||
chartCount++;
|
||||
}
|
||||
|
||||
html += F("</table></div><script>ChartJsonRefresh(); DrawChart();</script>");
|
||||
if(chartCount > 0) {
|
||||
/* FOR TESTING ONLY - INCLUDE EXTERNAL CSSCHARTS*/
|
||||
html += F("<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css'>");
|
||||
html += F("<div id='chartDiv'><table id='chartTable' class='charts-css line multiple show-data-on-hover show-heading show-primary-axis'><caption>Linechart</caption>");
|
||||
|
||||
html += F("</table><ul id='chartLegend' class='charts-css legend legend-line'></ul></div><script>DrawChart();</script>");
|
||||
}
|
||||
return html;
|
||||
} else {
|
||||
return String();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue