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

function drawChart() {
    function fetchDataAndDrawChart() {
        // Fetch data from Django view
        fetch('/read_tx_bytes')
            .then(response => response.json())
            .then(data => {
                // Check device ID
                var deviceId = localStorage.getItem('deviceId');
                if (deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi') {
                    // Create data array from the response
                    const chartData = [["Density", "Element", { role: "style" }]];
                    data.switch_data.forEach((value, index) => {
                        chartData.push([`${index + 1}`, parseInt(value), "#1EC79A"]);
                    });

                    // Create DataTable from the data array
                    const dataTable = google.visualization.arrayToDataTable(chartData);
                    var view = new google.visualization.DataView(dataTable);
                    view.setColumns([0, 1, 2]);

                    var options = {
                        title: "SWITCH",
                        bar: { groupWidth: "95%" },
                        legend: { position: "none" },
                        backgroundColor: '#0c212b',
                        tooltip: { trigger: 'none' }
                    };

                    var chart = new google.visualization.ColumnChart(document.getElementById("SwitchChart"));
                    chart.draw(view, options);
                } else {
                    // If device ID doesn't match, draw chart with all values set to 0
                    const chartData = [["Density", "Element", { role: "style" }]];
                    for (let i = 1; i <= data.switch_data.length; i++) {
                        chartData.push([`${i}`, 0, "#1EC79A"]);
                    }

                    const dataTable = google.visualization.arrayToDataTable(chartData);
                    var view = new google.visualization.DataView(dataTable);
                    view.setColumns([0, 1, 2]);

                    var options = {
                        title: "SWITCH",
                        bar: { groupWidth: "95%" },
                        legend: { position: "none" },
                        backgroundColor: '#0c212b',
                        tooltip: { trigger: 'none' }
                    };

                    var chart = new google.visualization.ColumnChart(document.getElementById("SwitchChart"));
                    chart.draw(view, options);
                }
            })
            .catch(error => console.error('Error fetching data:', error));
    }

    // Call the function once to draw the initial chart
    fetchDataAndDrawChart();

    // Update chart every 5 seconds
    setInterval(fetchDataAndDrawChart, 25000);
    $(document).on('click', function() {
        fetchDataAndDrawChart();
    });
}
















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

// function drawChart() {
//     // Fetch data from Django view
//     fetch('/read_tx_bytes')
//         .then(response => response.json())
//         .then(data => {
//             // Create data array from the response
//             const chartData = [["Density", "Element", { role: "style" }]];
//             data.switch_data.forEach((value, index) => {
//                 chartData.push([`${index + 1}`, parseInt(value), "#1EC79A"]);
//             });

//             // Create DataTable from the data array
//             const dataTable = google.visualization.arrayToDataTable(chartData);
//             var view = new google.visualization.DataView(dataTable);
//             view.setColumns([0, 1, 2]);

//             var options = {
//                 title: "SWITCH",
//                 bar: { groupWidth: "95%" },
//                 legend: { position: "none" },
//                 backgroundColor: '#0c212b',
//                 tooltip: { trigger: 'none' }
//             };

//             var chart = new google.visualization.ColumnChart(document.getElementById("SwitchChart"));
//             chart.draw(view, options);
//         })
//         .catch(error => console.error('Error fetching data:', error));
// }