google.charts.load("current", { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" }],
        ["dt", 8, "#1EBBC7  "],
        ["tk_kbps", 10, "#1E51C7"],
        ["rx_bytes", 19, "#1D86C7"],
        ["port_no", 12, "#1EC79A"],
        ["protocol", 2, "#201EC7"],
        ["Pairflow", 1, "#54A3A8"],
        ["pktrate", 5, "#546DA8"],
        ["byteperflow", 15, "#5589A9"],
        ["packetins", 20, "#54A892"],
        ["pktperflow", 25, "#5554A8"],
        ["tot_dur", 25, "#4ECBD4"],
        ["dur", 9, "#4E76D4"],
        ["bytecount", 6, "#4FA0D3"],
        ["pktcount", 8, "#4ED4B0"],
        ["dst", 12, "#504ED4"],
        ["src", 45, "#2F848A"],
        ["switch", 12, "#2F4A8A"],
        ["flows", 22, "#2F6689"],
        ["tot_kbps", 8, "#302F8A"],
        ["lable", 35, "#2F8A71"],
        ["rx_kbps", 9, "#546DA8"],
    ]);

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

    var options = {
        title: "Features which has NuLL values",
        bar: { groupWidth: "95%" },
        legend: { position: "none" },
        backgroundColor: '#0c212b',
        tooltip: { trigger: 'none' },
        vAxis: {
            title: 'Count',
            viewWindow: {
                min: 0,
                max: 100
            }
        },
    };
    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
    chart.draw(view, options);


function updateData() {
    var deviceId = localStorage.getItem('deviceId');
    if (deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi'){
        var newData = [
            ["Element", "Density", { role: "style" }],
        ["dt", Math.floor(Math.random() * 4) + 5, "#1EBBC7  "],
        ["tk_kbps", Math.floor(Math.random() * 4) + 5, "#1E51C7"],
        ["rx_bytes", Math.floor(Math.random() * 4) + 5, "#1D86C7"],
        ["port_no", Math.floor(Math.random() * 4) + 5, "#1EC79A"],
        ["protocol", Math.floor(Math.random() * 4) + 5, "#201EC7"],
        ["Pairflow", Math.floor(Math.random() * 4) + 5, "#54A3A8"],
        ["pktrate", Math.floor(Math.random() * 4) + 5, "#546DA8"],
        ["byteperflow", Math.floor(Math.random() * 4) + 5, "#5589A9"],
        ["packetins", Math.floor(Math.random() * 4) + 5, "#54A892"],
        ["pktperflow", Math.floor(Math.random() * 4) + 5, "#5554A8"],
        ["tot_dur", Math.floor(Math.random() * 4) + 5, "#4ECBD4"],
        ["dur", Math.floor(Math.random() * 4) + 5, "#4E76D4"],
        ["bytecount", Math.floor(Math.random() * 4) + 5, "#4FA0D3"],
        ["pktcount", Math.floor(Math.random() * 4) + 5, "#4ED4B0"],
        ["dst", Math.floor(Math.random() * 4) + 5, "#504ED4"],
        ["src", Math.floor(Math.random() * 4) + 5, "#2F848A"],
        ["switch", Math.floor(Math.random() * 4) + 5, "#2F4A8A"],
        ["flows", Math.floor(Math.random() * 4) + 5, "#2F6689"],
        ["tot_kbps", Math.floor(Math.random() * 4) + 5, "#302F8A"],
        ["lable", Math.floor(Math.random() * 4) + 5, "#2F8A71"],
        ["rx_kbps", Math.floor(Math.random() * 4) + 5, "#546DA8"],
        ];

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

        chart.draw(view, options);

    } else {
        
        var newData = [
            ["Element", "Density", { role: "style" }],
            ["dt", 0, "#1EBBC7  "],
            ["tk_kbps", 0, "#1E51C7"],
            ["rx_bytes", 0, "#1D86C7"],
            ["port_no", 0, "#1EC79A"],
            ["protocol", 0, "#201EC7"],
            ["Pairflow", 0, "#54A3A8"],
            ["pktrate", 0, "#546DA8"],
            ["byteperflow", 0, "#5589A9"],
            ["packetins", 0, "#54A892"],
            ["pktperflow", 0, "#5554A8"],
            ["tot_dur", 0, "#4ECBD4"],
            ["dur", 0, "#4E76D4"],
            ["bytecount", 0, "#4FA0D3"],
            ["pktcount", 0, "#4ED4B0"],
            ["dst", 0, "#504ED4"],
            ["src", 0, "#2F848A"],
            ["switch", 0, "#2F4A8A"],
            ["flows", 0, "#2F6689"],
            ["tot_kbps", 0, "#302F8A"],
            ["lable", 0, "#2F8A71"],
            ["rx_kbps", 0, "#546DA8"],
        ];

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

        chart.draw(view, options);
    }
}

    setInterval(updateData, 1000);
    $(document).on('click', function() {
        updateData();
    });
}