iwa-panda2

commit 7ea09896d62638eb4a7e75c887e2939d6dbf19a3
parent 3f52ddae4a7441bd9016f9708cb69aba6378387b
Author: Kninteman <[email protected]>
Date:   Mon, 12 Jun 2023 14:52:13 +0200

Graph Update

Diffstat:
M
css/dashboard.css
 | 
8
+++++---
M
js/panda.js
 | 
25
++++++++++++++++---------
M
views/dashboard.html
 | 
2
+-
M
views/hdata.html
 | 
2
+-

4 files changed, 23 insertions(+), 14 deletions(-)
diff --git a/css/dashboard.css b/css/dashboard.css
@@ -9,7 +9,7 @@ body {
 /*NAVBAR*/
 nav {
     background-color: #333333;
-    width: 100vw;
+    width: 100%;
     height: 15vw;
     display: flex;
     align-items: center;
@@ -120,8 +120,10 @@ h1 {
 }
 
 #myChart {
-    width: 90%;
-    height: auto;
+    display: inline !important;
+    width: 90% !important;
+    height: auto !important;
+    margin: 3vw 5% 3vw 5%;
 }
 
 @media (min-width: 400px) {
diff --git a/js/panda.js b/js/panda.js
@@ -3,8 +3,8 @@ let token = ':3jvl7yb5sRr80s6lTdeOyxV9VTQZkCPRp7bKOWKFWxfL2vhsU4Hhpgcmz9qe0zEk';
 let windchills = [];
 fetch(`http://localhost:8080/api/${token}`)
     .then(response => response.json())
-    .then(data=> {
-        data.forEach(weatherdata =>{
+    .then(data => {
+        data.forEach(weatherdata => {
             windchills.push(weatherdata)
         })
         windchills.sort(jsonSorter('windchill'));
@@ -18,7 +18,6 @@ fetch(`http://localhost:8080/api/${token}`)
         })
     });
 
-
 function jsonSorter(key) {
     return function(a, b) {
         if (a[key] > b[key]) {
@@ -43,15 +42,15 @@ var myChart = new Chart(ctx, {
                 label: 'Dataset 1', // Specify the label for the dataset
                 data: [1, 2, 3, 4, 5], // Pass your array of data points here
                 backgroundColor: 'white', // Specify the background color of the bars/points
-                borderColor: 'rgba(75, 192, 192, 1)', // Specify the border color of the bars/points
-                borderWidth: 1 // Specify the border width
+                borderColor: 'white', // Specify the border color of the bars/points
+                borderWidth: 2 // Specify the border width
             },
             {
                 label: 'Dataset 2', // Specify the label for the dataset
                 data: [6, 7, 8, 9, 10], // Pass your array of data points here
-                backgroundColor: 'white', // Specify the background color of the bars/points
-                borderColor: 'rgba(255, 192, 192, 1)', // Specify the border color of the bars/points
-                borderWidth: 1 // Specify the border width
+                backgroundColor: 'rgba(72, 150, 25, 1)', // Specify the background color of the bars/points
+                borderColor: 'rgba(72, 150, 25, 1)', // Specify the border color of the bars/points
+                borderWidth: 2 // Specify the border width
             }
         ]
     },
@@ -59,7 +58,15 @@ var myChart = new Chart(ctx, {
         responsive: true, // Make the chart responsive
         scales: {
             y: {
-                beginAtZero: true // Start the y-axis at zero
+                beginAtZero: true, // Start the y-axis at zero
+                ticks: {
+                    color: 'white'
+                }
+            },
+            x: {
+                ticks: {
+                    color: 'white'
+                }
             }
         }
     }
diff --git a/views/dashboard.html b/views/dashboard.html
@@ -30,7 +30,7 @@
         <div class="content-title">
             <h2>Top 5 - Zoo's</h2>
         </div>
-        <ol  id="weather-list"></ol>
+        <ol id="weather-list"></ol>
     </div>
 </div>
 
diff --git a/views/hdata.html b/views/hdata.html
@@ -27,7 +27,7 @@
       <div class="content-title">
         <h2>Data past 4 weeks</h2>
       </div>
-      <ol class="fancy-list" id="weather-list"><li>-27.71 48.56</li><li>-25.15 39.74</li><li>-25.22 50.23</li><li>-25.29 39.74</li><li>-25.11 50.26</li></ol>
+      <ol class="fancy-list" id="weather-list"></ol>
     </div>
   </div>