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

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

function updateLiveData() {
    $.get('/live-data/', function (data) {
        $('#cpu-usage').text(data.cpu_usage + '%');
        var newData = myLineChart.data.datasets[0].data;
        newData.shift();
        newData.push(data.cpu_usage);
        myLineChart.update();

    });
}
setInterval(updateLiveData, 2000);