Chart example on ESP8266

data/index.htm

@@ -14,7 +14,7 @@
         background-color: #b8b8b8; color: black;
       }
     </style>
-    <script src="chart.min.js.gz"></script>
+    <script src="/chart.min.js"></script>
     <script type="text/javascript">
       function mySensorTimer(){
         const xhttp = new XMLHttpRequest();
@@ -43,6 +43,44 @@
 
       function onBodyLoad(){
         setInterval(mySensorTimer, 5000);
+
+        // Test chart
+        const ctx = document.getElementById('myChart');
+        const myChart = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+                datasets: [{
+                    label: '# of Votes',
+                    data: [12, 19, 3, 5, 2, 3],
+                    backgroundColor: [
+                        'rgba(255, 99, 132, 0.2)',
+                        'rgba(54, 162, 235, 0.2)',
+                        'rgba(255, 206, 86, 0.2)',
+                        'rgba(75, 192, 192, 0.2)',
+                        'rgba(153, 102, 255, 0.2)',
+                        'rgba(255, 159, 64, 0.2)'
+                    ],
+                    borderColor: [
+                        'rgba(255, 99, 132, 1)',
+                        'rgba(54, 162, 235, 1)',
+                        'rgba(255, 206, 86, 1)',
+                        'rgba(75, 192, 192, 1)',
+                        'rgba(153, 102, 255, 1)',
+                        'rgba(255, 159, 64, 1)'
+                    ],
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                scales: {
+                    y: {
+                        beginAtZero: true
+                    }
+                }
+            }
+        });
+
       }
     </script>
   </head>
@@ -89,5 +127,6 @@
       </tr>
     </tbody>
     </table>
+    <canvas id="myChart" width="400" height="400"></canvas>
   </body>
 </html>