Graph Test

Watcher/Views/Server/_ServerDetails.cshtml

@@ -47,21 +47,46 @@
     <div class="mt-4">
         <h6><i class="bi bi-graph-up me-1"></i>Uptime letzte 24h</h6>
         <div class="bg-light border rounded p-4 text-center text-muted" style="height: 250px;">
-            <canvas id="uptimeChart"></canvas>
+            <canvas id="UptimeChart"></canvas>
         </div>
     </div>
 
     <div class="mt-4">
         <h6><i class="bi bi-graph-up me-1"></i>CPU Last</h6>
         <div class="bg-light border rounded p-4 text-center text-muted" style="height: 250px;">
-            <canvas id="uptimeChart"></canvas>
+            <canvas id="CpuLoadChart"></canvas>
         </div>
     </div>
 
     <div class="mt-4"></div>
     <h6><i class="bi bi-graph-up me-1"></i>RAM Last</h6>
     <div class="bg-light border rounded p-4 text-center text-muted" style="height: 250px;">
-        <canvas id="uptimeChart"></canvas>
+        <canvas id="RamLoadChart"></canvas>
     </div>
 </div>
 </div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+<script>
+    const ctx = document.getElementById('CpuLoadChart');
+
+    new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+            datasets: [{
+                label: 'Auslastung',
+                data: [12, 19, 3, 5, 2, 3],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
+        }
+    });
+</script>