<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Consumer Arrivals</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>

<canvas id="arrivalsChart" width="400" height="200"></canvas>

<script>
    const ctx = document.getElementById('arrivalsChart').getContext('2d');

    // Data preparation
    const arrivalsData = <?php echo json_encode($arrivals); ?>;

    const labels = arrivalsData.map(item => item.bulan);
    const data = arrivalsData.map(item => item.total_konsumen);

    const arrivalsChart = new Chart(ctx, {
        type: 'bar', // or 'line'
        data: {
            labels: labels,
            datasets: [{
                label: 'Total Konsumen Yang Datang',
                data: data,
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>

</body>
</html>
