commit 0ebcc9611c9d2cfeb23e77093696f4f3235f9bc3
parent 6453b63ec7212321aad373f3f1e0a1a8045513d4
Author: Kninteman <[email protected]>
Date: Mon, 12 Jun 2023 16:10:49 +0200
UpdateEvery5Min
Diffstat:
| M | js/panda.js | | | 119 | +++++++++++++++++++++++++++++++++++++++++++------------------------------------ |
1 file changed, 65 insertions(+), 54 deletions(-)
diff --git a/js/panda.js b/js/panda.js
@@ -1,7 +1,8 @@
-let token = ':3jvl7yb5sRr80s6lTdeOyxV9VTQZkCPRp7bKOWKFWxfL2vhsU4Hhpgcmz9qe0zEk';
-
+let zooToken = ':3jvl7yb5sRr80s6lTdeOyxV9VTQZkCPRp7bKOWKFWxfL2vhsU4Hhpgcmz9qe0zEk';
+let facilityToken = ':ae9c50dc5cd58c538a0d6aedb17fffedcaffd568d22381dab3ae72baaeb24684';
let windchills = [];
-fetch(`http://localhost:8080/api/${token}`)
+
+fetch(`http://localhost:8080/api/${zooToken}`)
.then(response => response.json())
.then(data => {
data.forEach(weatherdata => {
@@ -27,6 +28,7 @@ fetch(`http://localhost:8080/api/${token}`)
}
});
+
function jsonSorter(key) {
return function(a, b) {
if (a[key] > b[key]) {
@@ -41,57 +43,65 @@ function jsonSorter(key) {
// Get the canvas element
var ctx = document.getElementById('myChart').getContext('2d');
-// Create the chart
-fetch(`http://localhost:8080/api/:ae9c50dc5cd58c538a0d6aedb17fffedcaffd568d22381dab3ae72baaeb24684`)
-.then(response => response.json())
- .then(data=> {
- let array = []
- data.forEach(point=>{
- array.push(point['humidity'])
- })
- var myChart = new Chart(ctx, {
- type: 'line',
- data: {
- labels: ['Measurement 1', 'Measurement 2', 'Measurement 3', 'Measurement 4', 'Measurement 5'],
- datasets: [
- {
- label: 'Dataset 1',
- data: array,
- backgroundColor: 'rgba(176, 204, 207, 1)',
- borderColor: 'rgba(176, 204, 207, 1)',
- borderWidth: 2
- },
- {
- label: 'Dataset 2',
- data: [6, 7, 8, 9, 10],
- backgroundColor: 'rgba(195, 176, 207, 1)',
- borderColor: 'rgba(195, 176, 207, 1)',
- borderWidth: 2
- }
- ]
+// Create the chart instance
+var myChart = new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: ['Measurement 1', 'Measurement 2', 'Measurement 3', 'Measurement 4', 'Measurement 5'],
+ datasets: [
+ {
+ label: 'Dataset 1',
+ data: [],
+ backgroundColor: 'rgba(176, 204, 207, 1)',
+ borderColor: 'rgba(176, 204, 207, 1)',
+ borderWidth: 2
},
- options: {
- responsive: true,
- scales: {
- y: {
- beginAtZero: true,
- ticks: {
- color: 'white'
- }
- },
- x: {
- ticks: {
- color: 'white'
- }
- }
- },
- plugins: {
- legend: {
- labels: {
- color: 'white'
- }
- }
+ {
+ label: 'Dataset 2',
+ data: [6, 7, 8, 9, 10],
+ backgroundColor: 'rgba(195, 176, 207, 1)',
+ borderColor: 'rgba(195, 176, 207, 1)',
+ borderWidth: 2
+ }
+ ]
+ },
+ options: {
+ responsive: true,
+ scales: {
+ y: {
+ beginAtZero: true,
+ ticks: {
+ color: 'white'
+ }
+ },
+ x: {
+ ticks: {
+ color: 'white'
}
}
- });
- })
+ },
+ plugins: {
+ legend: {
+ labels: {
+ color: 'white'
+ }
+ }
+ }
+ }
+});
+
+function fetchDataAndUpdateChart() {
+ fetch(`http://localhost:8080/api/${facilityToken}`)
+ .then(response => response.json())
+ .then(data => {
+ let array = [];
+ data.forEach(point => {
+ array.push(point['humidity']);
+ });
+ myChart.data.datasets[0].data = array;
+ myChart.update();
+ })
+}
+
+fetchDataAndUpdateChart();
+setInterval(fetchDataAndUpdateChart, 300000);
+\ No newline at end of file
