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

<canvas id="buyersChart" width="600" height="400"></canvas>

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

    // Data preparation
    const comparisonData = <?php echo json_encode($comparison); ?>;
    
    const months = comparisonData.map(data => data.month);
    const newBuyers = comparisonData.map(data => parseInt(data.new_buyers) || 0);
    const oldBuyers = comparisonData.map(data => parseInt(data.old_buyers) || 0);

    const buyersChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: months.map(m => m + "月"), // Append '月' for clarity
            datasets: [
                {
                    label: 'New Buyers',
                    data: newBuyers,
                    backgroundColor: 'rgba(75, 192, 192, 0.5)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Old Buyers',
                    data: oldBuyers,
                    backgroundColor: 'rgba(153, 102, 255, 0.5)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    borderWidth: 1
                }
            ]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Number of Buyers'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Month'
                    }
                }
            }
        }
    });
</script>

</body>
</html>
