60 lines
1.5 KiB
JavaScript
60 lines
1.5 KiB
JavaScript
var ctx = document.getElementById('lineChart').getContext('2d');
|
|
var data = {
|
|
labels: ['1', '2', '3', '4', '5'],
|
|
datasets: [{
|
|
label: 'Data',
|
|
data: [10, 20, 15, 25, 30],
|
|
fill: false,
|
|
borderColor: 'rgba(75, 192, 192, 1)',
|
|
borderWidth: 2,
|
|
pointRadius: 5,
|
|
pointHoverRadius: 8,
|
|
}]
|
|
};
|
|
|
|
var options = {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
x: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
}
|
|
};
|
|
|
|
var myLineChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: data,
|
|
options: options
|
|
});
|
|
|
|
function updateLiveData() {
|
|
var newData = myLineChart.data.datasets[0].data;
|
|
newData.shift();
|
|
var cpuUsage = getRandomCPUUsage();
|
|
newData.push(cpuUsage);
|
|
myLineChart.update();
|
|
document.getElementById('cpu-usage').innerText = cpuUsage.toFixed(2) + '%';
|
|
|
|
$(document).on('click', function() {
|
|
updateLiveData();
|
|
});
|
|
}
|
|
|
|
function getRandomCPUUsage() {
|
|
var deviceId = localStorage.getItem('deviceId');
|
|
if (deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi' ) {
|
|
return Math.round(Math.random() * (100 - 35) + 35);
|
|
} else {
|
|
return Math.round(Math.random() * (0 - 0) + 0);
|
|
|
|
}
|
|
}
|
|
setInterval(updateLiveData, 2000);
|