google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Y');
    var chart = new google.visualization.LineChart(document.getElementById('LineFlowDurationChart'));
    var options = {
        title: '   ',
        vAxis: { title: 'Total Fwd Packets', minValue: 0, maxValue: 5 },
        hAxis: { title: 'Total Length of Fwd Packets', minValue: 0, maxValue: 5 },
        curveType: 'function',
        backgroundColor: '#0c212b',
        tooltip: { trigger: 'none' },
        colors: ['#2f6689']
    };

    function updateChart() {
        data.removeRows(0, data.getNumberOfRows());
        var newData = generateData();
        data.addRows(newData);
        chart.draw(data, options);
    }

    function generateData() {
        var newData = [];
        var deviceId = localStorage.getItem('deviceId');
        if (deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi') {
            for (var i = 0; i <= 5; i++) {
                newData.push([i, Math.random() * 5]);
            }
        } else {
            for (var i = 0; i <= 5; i++) {
                newData.push([i, 0]);
            }
        }
        return newData;
    }

    updateChart(); // Initial chart draw

    // Update chart every second
    setInterval(updateChart, 2000);
}