function loadDataAndRefreshChart() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'datagrafik_so2_realtime.php');
    xhr.onload = function() {
        if (xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            drawMonthlySalesChart(data);
        } else {
            console.error('Failed to load monthly sales data');
        }
    };
    xhr.send();
}

// Refresh data setiap 5 detik
setInterval(loadDataAndRefreshChart, 5000);

// Panggil fungsi pertama kali untuk menginisialisasi grafik
loadDataAndRefreshChart();


// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#858796';

function drawMonthlySalesChart(data) {
  var ctx = document.getElementById('chart1').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: data.labels,
            datasets: [{
                label: 'SO2 (PPM)',
                data: data.values,
                fill: false,
                borderColor: 'blue',
                
            }]
        },
        options: {
            maintainAspectRatio: false,
            responsive: true, // Menonaktifkan responsif
            width: 800, // Atur lebar chart sesuai kebutuhan
            height: 200, // Atur tinggi chart sesuai kebutuhan
            legend: { display: true },
            animation: {
                duration: 0 // Menonaktifkan animasi
            }
        }
    });
}