System Monitor Tool with colorful styling

System Monitor

const memoryData = { labels: ['Usage'], datasets: [{ label: 'Memory Usage', backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255, 99, 132, 1)', borderWidth: 1, data: [0], }] }; const diskData = { labels: ['Usage'], datasets: [{ label: 'Disk Usage', backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor: 'rgba(54, 162, 235, 1)', borderWidth: 1, data: [0], }] }; const cpuCtx = document.getElementById('cpu-chart').getContext('2d'); const memoryCtx = document.getElementById('memory-chart').getContext('2d'); const diskCtx = document.getElementById('disk-chart').getContext('2d'); const cpuChart = new Chart(cpuCtx, { type: 'bar', data: cpuData, options: { scales: { y: { beginAtZero: true } } } }); const memoryChart = new Chart(memoryCtx, { type: 'bar', data: memoryData, options: { scales: { y: { beginAtZero: true } } } }); const diskChart = new Chart(diskCtx, { type: 'bar', data: diskData, options: { scales: { y: { beginAtZero: true } } } }); function updateCharts() { // Simulated values for demonstration const cpuUsage = Math.random() * 100; const memoryUsage = Math.random() * 100; const diskUsage = Math.random() * 100; cpuChart.data.datasets[0].data[0] = cpuUsage.toFixed(2); memoryChart.data.datasets[0].data[0] = memoryUsage.toFixed(2); diskChart.data.datasets[0].data[0] = diskUsage.toFixed(2); cpuChart.update(); memoryChart.update(); diskChart.update(); } // Update charts every 2 seconds setInterval(updateCharts, 2000);