added line chart using chart.js and added some function to rename keys in json...

added line chart using chart.js and added some function to rename keys in json and vonert data from array[array] to array[json]

index.html

@@ -28,6 +28,9 @@
     <script src="https://code.highcharts.com/stock/modules/data.js"></script>
     <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
     <script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
+
+    <!-- chart.js library  -->
+    <script src='https://cdn.jsdelivr.net/npm/chart.js@3.2.1/dist/chart.min.js'></script>
     <!-- Apexcharts lib -->
     <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <link rel="stylesheet" href="css/styles.css" />
@@ -124,8 +127,37 @@
                     <div id="chart-apex-heatmap" width="100%" height="40"></div>
                   </div>
                 </div>
-              </div>
+              </div>      
+              
+              <div class="col-xl-6">
+                <div class="card mb-4">
+                  <div class="card-header">
+                    <i class="fas fa-chart-area mr-1"></i>
+                    Test Chart.js
+                  </div>
+                  <div class="card-body">
+                    <canvas id="lineChart" width="400" height="400"></canvas>
+                  </div>
+                </div>
+              </div> 
+
+              <div class="col-xl-6">
+                <div class="card mb-4">
+                  <div class="card-header">
+                    <i class="fas fa-chart-area mr-1"></i>
+                    Test Scatter Chart.js
+                  </div>
+                  <div class="card-body">
+                    <canvas id="scatterChart" width="400" height="400"></canvas>
+                  </div>
+                </div>
+              </div> 
+
             </div>
+
+
+
+
           </div>
         </main>
         <footer class="py-4 bg-light mt-auto">

public/js/appChart.js

@@ -437,7 +437,83 @@ followNextLink(
     console.log(err);
   })
   .then((observationArr) => {
-    updateLineChartAC(chart1LineTitle, observationArr);
-    drawHeatMapAC2(observationArr);
-  });
-///test
+    // updateLineChartAC(chart1LineTitle, observationArr);
+    // drawHeatMapAC2(observationArr);
+
+    ///////////// use chart.js for line chart
\ No newline at end of file
+
+    var ctx = document.getElementById("lineChart").getContext("2d");
+    var lineChart = new Chart(ctx, {
+      type: "line",
+      data: {
+        datasets: [
+          {
+            label: "Inflow (Vorlauf)",
+            data: observationArr, // [12, 19, 3, 5, 2, 3]
+            borderColor: ["rgba(255, 99, 132, 0.2)"],
+            fill: false
+          },
+        ],
+      },
+      options: {
+        scales: {
+          y: {
+            beginAtZero: true,
+          },
+        },
+      },
+    });
+  
+
+    function renameKey ( obj, oldKey, newKey ) {
+      obj[newKey] = obj[oldKey];
+      delete obj[oldKey];
+    }
+
+    function convertArray2JSON(arr){
+      var arrayToString = JSON.stringify(Object.assign({}, arr));  // convert array to string
+      var stringToJsonObject = JSON.parse(arrayToString);  // convert string to json object
+      return stringToJsonObject;
+    }
+    
+  
+  let jsonFromArr = [];
+  for (var i=0; i < observationArr.length; i++){
+    jsonFromArr.push(convertArray2JSON(observationArr[i]));
+  }
+
+  jsonFromArr.forEach( obj => renameKey( obj, '0', 'x' ) );
+  let jsonFromArr2 = jsonFromArr;
+  jsonFromArr2.forEach( obj => renameKey( obj, '1', 'y' ) );
+  
+  // arr = JSON.parse(observationArr_upd1);
+  // arr.forEach( obj => renameKey( obj, '1', 'y' ) );
+  // const observationArr_upd2 = JSON.stringify( arr );
+
+   ///////////// use chart.js for line chart
+
+   var ctx_scatter = document.getElementById("scatterChart").getContext("2d");
+   var scatterChart = new Chart(ctx_scatter, {
+     type: "scatter",
+     data: {
+       datasets: [
+         {
+           label: "Inflow (Vorlauf)",
+           data: jsonFromArr2, // [12, 19, 3, 5, 2, 3]
+           borderColor: ["rgba(255, 99, 132, 0.2)"],
+           fill: false
+         },
+       ],
+     },
+     options: {
+       scales: {
+         y: {
+           beginAtZero: true,
+         },
+       },
+     },
+   });
+
+
+
+ });  // this closes the followLink.then ({ .... })