graph json data embedded in html works much better

include/CanGrow.h

@@ -56,7 +56,7 @@ const byte Max_Sensors_GPIO = 2;
 
 /* Max Limits for Dashboard elements*/
 const byte Max_Dashboard_Gauge = 6;
-const byte Max_Dashboard_Chart = 6;
+const byte Max_Dashboard_Chart = 3;
 const byte Max_Dashboard_Data = 6;
 
 /* actual structure initialization for GPIO_Index is done within the header files

include/CanGrow_Core.h

@@ -733,3 +733,81 @@ unsigned long Timescale(byte unit) {
     break;
   }
 }
+
+
+/*
+ * 
+ * Chart JSON generate as String
+ * 
+ */
+
+String Str_Chart_Json() {
+  JsonDocument doc;
+  for(byte i = 0 ; i < Max_Dashboard_Chart ; i++) {
+    if(config.grow.dashboard.chartConfigured[i] == true) {
+
+      JsonObject objChart = doc["chart"].add<JsonObject>();
+      objChart["id"] = i;
+      //objSensor["unit"] = Sensor_Read_unit[SensorIndex[config.system.sensor.type[config.grow.dashboard.chartSensor[i]]].read[config.grow.dashboard.chartRead[i]]];
+      
+      objChart["name"] = config.system.sensor.name[config.grow.dashboard.chartSensor[i]];
+      /* when for a RAW reading rawConvert is set, return the converted description and unit */
+      if((SensorIndex[config.system.sensor.type[config.grow.dashboard.chartSensor[i]]].read[config.grow.dashboard.chartRead[i]] == SENSOR_READ_TYPE_RAW) && (config.system.sensor.rawConvert[config.grow.dashboard.chartSensor[i]][config.grow.dashboard.chartRead[i]] > 0)) {
+        objChart["descr"] = FPSTR(Sensor_Convert_Raw_descr[config.system.sensor.rawConvert[config.grow.dashboard.chartSensor[i]][config.grow.dashboard.chartRead[i]]]);
+        objChart["unit"] = FPSTR(Sensor_Convert_Raw_unit[config.system.sensor.rawConvert[config.grow.dashboard.chartSensor[i]][config.grow.dashboard.chartRead[i]]]);
+      } else {
+        objChart["descr"] = FPSTR(Sensor_Read_descr[SensorIndex[config.system.sensor.type[config.grow.dashboard.chartSensor[i]]].read[config.grow.dashboard.chartRead[i]]]);
+        objChart["unit"] = FPSTR(Sensor_Read_unit[SensorIndex[config.system.sensor.type[config.grow.dashboard.chartSensor[i]]].read[config.grow.dashboard.chartRead[i]]]);
+      }
+      
+      /* build path to chart data dir */
+      char chartDirPath[10];
+      snprintf(chartDirPath, sizeof(chartDirPath), "%s%d", CHART_BASE_PATH, i);
+      /* count number of datasets stored */
+      unsigned short dataIndex = 0;
+      
+      //Serial.println(chartDirPath);
+      
+      /* https://github.com/cotestatnt/async-esp-fs-webserver/blob/master/src/AsyncFsWebServer.cpp */
+      File rootDir = LittleFS.open(chartDirPath, "r");
+      File file = rootDir.openNextFile();
+      //float previousData = 0;
+      /* iterate through all files in chart directory */
+      while (file) { 
+        if (!file.isDirectory()) {
+          
+          /* absolute path to the file we want to read */
+          char chartFilePath[32];
+          snprintf(chartFilePath, sizeof(chartFilePath), "%s/%s", chartDirPath, file.name());
+          //Serial.println(chartFilePath);
+          /* the actual file we are reading */
+          File fileRead = LittleFS.open(chartFilePath, "r");
+          
+          while(fileRead.available()) {
+            /* convert timestamp to unsigned long */
+            unsigned long timestamp = strtoul(fileRead.readStringUntil(';').c_str(), NULL, 0);
+            /* convert the data point to float*/
+            float dataPoint = fileRead.readStringUntil('\n').toFloat();
+            
+            objChart["data"][dataIndex] = dataPoint;
+            objChart["timestamp"][dataIndex] = timestamp;
+            
+            /* increment datacount */
+            dataIndex++;
+          }
+          fileRead.close();
+          
+        } 
+        file = rootDir.openNextFile();
+      }
+      
+      objChart["datapoints"] = dataIndex;
+    
+      
+    }
+  }
+  
+  String json;
+  serializeJson(doc, json);
+  return json;
+}

include/CanGrow_LittleFS.h

@@ -812,9 +812,9 @@ void LFS_Chart_Rotate_Data(const byte chartId) {
   /* timestamp of the oldest file allowed. Anything older gets deleted. convert to unsigned long */
   
   #if defined(DEBUG)
-  unsigned long timestampOldest = strtoul(Char_Timestamp_yyyymmdd(now() - (5 * Timescale(TIMESCALE_MINUTE))), NULL, 0);
+  unsigned long timestampOldest = strtoul(Char_Timestamp_yyyymmdd(now() - (3 * Timescale(TIMESCALE_MINUTE))), NULL, 0);
   #else
-  unsigned long timestampOldest = strtoul(Char_Timestamp_yyyymmdd(now() - (5 * Timescale(TIMESCALE_DAY))), NULL, 0);
+  unsigned long timestampOldest = strtoul(Char_Timestamp_yyyymmdd(now() - (3 * Timescale(TIMESCALE_DAY))), NULL, 0);
   #endif
   
   char chartDirPath[10];

include/CanGrow_Timer.h

@@ -65,7 +65,7 @@ void TimeR_Init() {
   timer.setInterval(100, Timer_Control);
   
   #if defined(DEBUG)
-  timer.setInterval(3*1000, Timer_3s);
+  timer.setInterval(2500, Timer_3s);
   #else
   timer.setInterval(15*60*1000, Timer_3s);
   #endif

include/Webserver/File_cangrow_JS.h

@@ -298,10 +298,13 @@ return exports;
 /* chartscss javascript stuff */
 
 function DrawChart() {
-  fetch('/api/chart/')
-    .then(function(res) { return res.json(); })
-    .then(function(ChartJson) {
-      /* get no of charts */
+  //fetch('/api/chart/')
+    //.then(function(res) { return res.json(); })
+    //.then(function(ChartJson) {
+    /* do stuff with ChartJson JSON object */
+    //});
+    var ChartJson = JSON.parse(document.getElementById('chartJson').innerHTML);
+      ///* get no of charts */
       chartSum = ChartJson.chart.length;
       
       const datapointsSum = [];
@@ -341,21 +344,9 @@ function DrawChart() {
             // 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>';
+            cell[j].innerHTML = '<span class=\'data minw\'> ' +  strTimestamp + ' (' + ChartJson.chart[j].data[i] + ' ' + ChartJson.chart[j].unit + ')</span>';
             
             /* add chartscss styles for line chart */
             /* build the css string in a var first */
@@ -378,7 +369,7 @@ function DrawChart() {
         }
       }
 
-    });
+    
 }
 
 )";

include/Webserver/Page_root.h

@@ -160,6 +160,9 @@ String Proc_WebPage_root(const String& var) {
     
     if(chartCount > 0) {
       /* FOR TESTING ONLY - INCLUDE EXTERNAL CSSCHARTS*/
+      html += F("<script type='application/json' id='chartJson'>");
+      html += Str_Chart_Json();
+      html += F("</script>");
       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>");