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

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

    var options = {
        title: 'The number of requests from different protocols',
        isStacked: true,
        vAxis: {
            minValue: 0,
            maxValue: 200
        },
        backgroundColor: '#0c212b',
        tooltip: { trigger: 'none' },
        colors: ['#1D86C7'],
        legend: { position: "none" }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('StackedColumnsChart'));

    // Update chart data every 2 seconds
    setInterval(function() {
        var newData = generateRandomData();
        data = google.visualization.arrayToDataTable(newData);
        chart.draw(data, options);
    }, 2000);
}

function generateRandomData() {
    var newData = [
        ['Year', 'Requests'],
        ['TCP/IP', generateRandomNumber()],
        ['HTTP', generateRandomNumber()],
        ['HTTPS', generateRandomNumber()],
        ['FTP', generateRandomNumber()],
        ['SMTP', generateRandomNumber()],
        ['POP3', generateRandomNumber()],
        ['IMAP', generateRandomNumber()],
        ['DNS', generateRandomNumber()],
        ['DHCP', generateRandomNumber()],
        ['SSH', generateRandomNumber()]
    ];
    return newData;
}

function generateRandomNumber() {
    return Math.floor(Math.random() * 21); // Generating a random number between 0 and 500
}