commit 793caa0525d4135d4ad19dec4379ab7cee6bd425
parent 4a078daad92a487acc52b5541b72b9c849c7ab4b
Author: Kninteman <[email protected]>
Date: Mon, 12 Jun 2023 14:20:26 +0200
Graph
Diffstat:
4 files changed, 45 insertions(+), 3 deletions(-)
diff --git a/Model/Key.php b/Model/Key.php
@@ -26,6 +26,7 @@ Class Key{
JOIN geolocation geo ON geo.country_code = co.country_code
JOIN contract c ON cs.contract_id = c.contract_id
WHERE c.token = '3jvl/yb?sRr80s6lTdeOyxV9VTQZkCPRp/bKOWKFWxfL2vhsU4Hhpgcmz9qe0zEk'
+ GROUP BY nl.name
LIMIT 5";
$stmt = mysqli_prepare($db, $query);
$stmt->execute();
diff --git a/css/dashboard.css b/css/dashboard.css
@@ -90,6 +90,7 @@ h1 {
}
.content-title {
+ display: inline-block;
background-color: #BCCFB0;
padding: 2px;
box-shadow: 0 0 10px #333333;
@@ -118,6 +119,10 @@ h1 {
margin-top: 10px;
}
+#myChart {
+ width: 90%;
+ height: auto;
+}
@media (min-width: 400px) {
/*NAVBAR*/
diff --git a/js/panda.js b/js/panda.js
@@ -26,4 +26,39 @@ function jsonSorter(key) {
}
return 0;
}
-}
-\ No newline at end of file
+}
+
+// Get the canvas element
+var ctx = document.getElementById('myChart').getContext('2d');
+
+// Create the chart
+var myChart = new Chart(ctx, {
+ type: 'line', // Specify the type of chart (e.g., bar, line, pie, etc.)
+ data: {
+ labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5'], // Specify the labels for the x-axis
+ datasets: [
+ {
+ 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
+ },
+ {
+ 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
+ }
+ ]
+ },
+ options: {
+ responsive: true, // Make the chart responsive
+ scales: {
+ y: {
+ beginAtZero: true // Start the y-axis at zero
+ }
+ }
+ }
+});
+\ No newline at end of file
diff --git a/views/dashboard.html b/views/dashboard.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<title>Panda Breeding Facilities</title>
<link rel="stylesheet" type="text/css" href="/css/dashboard.css"/>
</head>
@@ -38,7 +39,7 @@
<div class="content-title">
<h2>Real-time Humidity graph</h2>
</div>
- <ol class="fancy-list" id="graph">Grafiek Hier Pls</ol>
+ <canvas id="myChart"></canvas>
</div>
</div>
</body>
