diff --git a/index.html b/index.html
index 2af58b68af47dc13535d17f6c733b2ada68df8b0..6b55324530fd70d5d8c1ccf65cd5d1c174a42941 100644
--- a/index.html
+++ b/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">
diff --git a/public/js/appChart.js b/public/js/appChart.js
index 0f7dc3f77bd75d067ac96b5e683a794bb5be9a25..b416b0f3812cd367faa725b38acd4204c6d7215d 100644
--- a/public/js/appChart.js
+++ b/public/js/appChart.js
@@ -437,7 +437,83 @@ followNextLink(
     console.log(err);
   })
   .then((observationArr) => {
-    updateLineChartAC(chart1LineTitle, observationArr);
-    drawHeatMapAC2(observationArr);
-  });
-///test
\ No newline at end of file
+    // updateLineChartAC(chart1LineTitle, observationArr);
+    // drawHeatMapAC2(observationArr);
+
+    ///////////// use chart.js for line chart
+
+    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 ({ .... })