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

function drawBasic() {
    var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" }],
        ["Ramnit", 10, "#000080"],
        ["Lollipop", 15, "#0000ff"],
        ["Kelihos_ver3", 20, "#0081ff"],
        ["Vundo", 9, "#17ffe2"],
        ["Simda", 12, "#7bff7b"],
        ["Tracur", 11, "#e3ff15"],
        ["Kelihos_ver1", 15, "#ff9801"],
        ["Obfuscator.ACY", 15, "#ff2200"],
        ["Gatak", 12, "#810000"],
    ]);

    var options = {
        title: 'Distribution of yi in train data',
        hAxis: {
            title: 'Class',
        },
        vAxis: {
            title: 'Data points per Class',
            viewWindow: {
                min: 0,
                max: 100
            }
        },
        legend: {
            position: 'none' // Disable the default legend
        },
        backgroundColor: '#0c212b',
        tooltip: { trigger: 'none' },
        height: 400,
        // width: 800,
        animation: {
            duration: 1000,
            easing: 'out',
        }
    };

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

    chart.draw(data, options);

    // Function to update data
    function updateData() {
        // Generate random values for each data point
    var deviceId = localStorage.getItem('deviceId');
    if (deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi'){
        var newData = [
            ["Element", "", { role: "style" }],
            ["Ramnit", Math.floor(Math.random() * 5), "#000080"],
            ["Lollipop", Math.floor(Math.random() * 5), "#0000ff"],
            ["Kelihos_ver3", Math.floor(Math.random() * 5), "#0081ff"],
            ["Vundo", Math.floor(Math.random() * 5), "#17ffe2"],
            ["Simda", Math.floor(Math.random() * 5), "#7bff7b"],
            ["Tracur", Math.floor(Math.random() * 5), "#e3ff15"],
            ["Kelihos_ver1", Math.floor(Math.random() * 5), "#ff9801"],
            ["Obfuscator.ACY", Math.floor(Math.random() * 5), "#ff2200"],
            ["Gatak", Math.floor(Math.random() * 5), "#810000"],
        ];

        data = google.visualization.arrayToDataTable(newData);
        chart.draw(data, options);
    } else {
        
        var newData = [
            ["Element", "Density", { role: "style" }],
            ["Ramnit",0, "#000080"],
            ["Lollipop",0, "#0000ff"],
            ["Kelihos_ver3",0, "#0081ff"],
            ["Vundo",0, "#17ffe2"],
            ["Simda",0, "#7bff7b"],
            ["Tracur",0, "#e3ff15"],
            ["Kelihos_ver1",0, "#ff9801"],
            ["Obfuscator.ACY",0, "#ff2200"],
            ["Gatak",0, "#810000"],
        ];

        data = google.visualization.arrayToDataTable(newData);
        view = new google.visualization.DataView(data);
        view.setColumns([0, 1, 2]);

        chart.draw(view, options);
    }
}

    // Update data every second
    setInterval(updateData, 1000);
    $(document).on('click', function() {
        updateData();
    });
}