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);