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

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'MSSQL', 'LDAP', 'UDP', 'Portmap', 'NetBios', 'BENIGN', 'Syn', 'UDPLag'],
        ['MSSQL', 0, 0, 0, 0, 0, 0, 0, 0],
        ['LDAP', 0, 0, 0, 0, 0, 0, 0, 0],
        ['UDP', 0, 0, 0, 0, 0, 0, 0, 0],
        ['Portmap', 0, 0, 0, 0, 0, 0, 0, 0],
        ['NetBios', 0, 0, 0, 0, 0, 0, 0, 0],
        ['BENIGN', 0, 0, 0, 0, 0, 0, 0, 0],
        ['Syn', 0, 0, 0, 0, 0, 0, 0, 0],
        ['UDPLag', 0, 0, 0, 0, 0, 0, 0, 0],
    ]);

    var options = {
        chart: {
            title: '  ',
        },
        vAxis: {
            title: '  ',
            viewWindow: {
                min: 0,
                max: 1000
            }
        },
        hAxis: { title: 'SimillarHTTP' },
        backgroundColor: '#0c212b',
        tooltip: { trigger: 'none' },
        colors: ['#367896', '#626496', '#365996', '#369696', '#513696']
    };

    var chart = new google.charts.Bar(document.getElementById('columnInHTTPChart'));

    function updateData() {
        var deviceId = localStorage.getItem('deviceId');
        if (deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi') {
            for (var i = 0; i < data.getNumberOfRows(); i++) {
                for (var j = 1; j < data.getNumberOfColumns(); j++) {
                    data.setValue(i, j, Math.floor(Math.random() * 81)); 
                }
            }
        } else {
            for (var i = 0; i < data.getNumberOfRows(); i++) {
                for (var j = 1; j < data.getNumberOfColumns(); j++) {
                    data.setValue(i, j, 0);
                }
            }
        }
        chart.draw(data, google.charts.Bar.convertOptions(options));
    }
    updateData();
    setInterval(updateData, 2000);
}