root page chart table javascript playground wip

playground/html/root/cangrow.js

@@ -286,3 +286,66 @@ 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;
+  
+  /* 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 = [];
+  var table = document.getElementById('tbl_chart0');
+  
+  for(let i = 0; i < datapointsMax; i++) {
+    row[i] = table.insertRow(i);
+    var cell = [];
+    for(let j = 0; j < chartSum; j++) {
+      cell[j] = row[i].insertCell(j);
+      cell[j].innerHTML = ChartJson.chart[j].data[i];
+    }
+  }
+
+  
+  //console.log(SensorJson.sensor[sensor].reading[reading].raw);
+  //console.log('sensor:' + sensor + ';reading:' + reading + ';id:' + id + ';element:' + element);
+}

playground/html/root/index.html

@@ -122,6 +122,10 @@ gaugeJS_6_2_0.value('497.00', 2, ' ppm');
 </script>
 
 <br>
+<script>ChartJsonRefresh();</script>
+
+<button onClick='ChartJsonRefresh(); DrawChart();'>Go</button>
+<span id='debugSpan'>Debug</span>
 
 <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css'>
 <style>
@@ -129,8 +133,8 @@ gaugeJS_6_2_0.value('497.00', 2, ' ppm');
   .minw { min-width: 140px; max-width: 320px; text-align: center; }}
 </style>
 <div id='chart0'>
-<table 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 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>
@@ -161,6 +165,7 @@ gaugeJS_6_2_0.value('497.00', 2, ' ppm');
   <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>