Seperate webpage for the diagram

2021-12-18 13:41:51 +01:00
parent ae6c53d39b
commit a3be4f19a1
3 changed files with 42 additions and 31 deletions
--- a/data/chart.htm
+++ b/data/chart.htm
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+    <title>IKEA Home Sensor Diagram</title>
+    <script src="/chart.min.js"></script>
+    <script type="text/javascript">
+      function onBodyLoad(){
+        
+        const xhttp = new XMLHttpRequest();
+        xhttp.responseType = 'json';
+        xhttp.onload = function() {
+          var jsonResponse = this.response;
+          console.log("JSON received");
+          const ctx = document.getElementById('myChart');
+          const myChart = new Chart(ctx, {
+            type: 'line',
+            data: jsonResponse,
+            options: {
+                scales: {
+                    y: {
+                        beginAtZero: false
+                    }
+                }
+            }
+          });
+          console.log("Diagram generated");
+          }
+        xhttp.open("GET", "/diagram", true);
+        xhttp.send();
+      }
+    </script>
+  </head>
+  <body id="body" onload="onBodyLoad()">
+    <canvas id="myChart" width="100%" height="100"></canvas>
+  </body>
+</html>