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

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', '');
    data.addColumn('number', '');

    // Randomly generating data
    var rows = [];
    for (var i = 0; i < 100; i++) {
        rows.push([Math.random() * 10, Math.random() * 100]);
    }
    data.addRows(rows);

    var options = {
        chart: {
            title: '',
        },
        backgroundColor: { fill: '#102d3c' },
        tooltip: { trigger: 'none' },
        vAxis: {
            viewWindow: {
                min: 0,
                max: 100
            }
        },
        hAxis: {
            viewWindow: {
                min: 0,
                max: 10
            }
        },
    };

    var chart = new google.charts.Scatter(document.getElementById('ScatterDDoSPCAChart'));

    function updateData() {
        var deviceId = localStorage.getItem('deviceId');
        if (deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi') {
            // Randomly generating data if device id matches
            var rows = [];
            for (var i = 0; i < 10; i++) {
                rows.push([Math.random() * 10, Math.random() * 10]);
            }
            data.removeRows(0, data.getNumberOfRows());
            data.addRows(rows);
        } else {
            // Setting data to 0 if device id does not match
            data.removeRows(0, data.getNumberOfRows());
        }
        chart.draw(data, google.charts.Scatter.convertOptions(options));
    }

    // Initial draw
    updateData();

    // Update data every 2 seconds
    setInterval(updateData, 2000);
}