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

// Define options globally
var options = {
    title: "Individual Training parameter changes",
    bar: { groupWidth: "25%" },
    legend: { position: "none" },
    backgroundColor: '#0c212b',
    tooltip: { trigger: 'none' },
    vAxis: {            
        title:'epoch',
        viewWindow: {
            min: 0,
            max: 100
        }
    },
    hAxis: {            
        title:'log loss',
        
    },
};

// Function to draw the initial chart
function drawChart() {
    var deviceId = localStorage.getItem('deviceId');
    var data;
    if (deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi') {
        data = google.visualization.arrayToDataTable([
            ["Element", "Density", { role: "style" }],
            ["0.001", 8, "#1EBBC7"],
            ["0.002", 5, "#1EBBC7"],
            ["0.003", 6, "#1EBBC7"],
            ["0.004", 5, "#1EBBC7"],
            ["0.005", 8, "#1EBBC7"],
        ]);
    } else {
        data = google.visualization.arrayToDataTable([
            ["Element", "Density", { role: "style" }],
            ["0.001", 8, "#1EBBC7"],
            ["0.002", 5, "#1EBBC7"],
            ["0.003", 6, "#1EBBC7"],
            ["0.004", 5, "#1EBBC7"],
            ["0.005", 8, "#1EBBC7"],
        ]);
    }

    var chart = new google.visualization.ColumnChart(document.getElementById('DurationChart'));
    chart.draw(data, options);
}

// Function to update chart data every second
function updateChartData() {
    setInterval(function() {
        var deviceId = localStorage.getItem('deviceId');
        var newData;
        if (deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi') {
            newData = [
                ["Element", "Density", { role: "style" }],
                ["0.001", Math.floor(Math.random() * 4) + 5, "#1EBBC7"],
                ["0.002", Math.floor(Math.random() * 4) + 5, "#1EBBC7"],
                ["0.003", Math.floor(Math.random() * 4) + 5, "#1EBBC7"],
                ["0.004", Math.floor(Math.random() * 4) + 5, "#1EBBC7"],
                ["0.005", Math.floor(Math.random() * 4) + 5, "#1EBBC7"],
               
            ];
        } else {
            newData = [
                ["Element", "Density", { role: "style" }],
                ["0.001", 0, "#1EBBC7"],
                ["0.002", 0, "#1EBBC7"],
                ["0.003", 0, "#1EBBC7"],
                ["0.004", 0, "#1EBBC7"],
                ["0.005", 0, "#1EBBC7"],
               
            ];
        }
        
        var newDataTable = google.visualization.arrayToDataTable(newData);
        var chart = new google.visualization.ColumnChart(document.getElementById('DurationChart'));
        chart.draw(newDataTable, options);
    }, 1000); 
}

// Load Google Charts and draw the initial chart
google.charts.setOnLoadCallback(function() {
    drawChart();
    updateChartData();
});