<?php
// Fetch data from your server or database
$data = [
    ['January', 10],
    ['February', 15],
    ['March', 7],
    // Add more data as needed
];

// Convert data to JSON format
$jsonData = json_encode($data);

// Output JSON data
echo "<script>var chartData = $jsonData;</script>";
?>
<!DOCTYPE html>
<html>
<head>
    <title>Chart.js Example</title>
    <style>
        /* Add custom CSS styles here */
    </style>
</head>
<body>
    ,jkll
    <canvas id="myChart"></canvas>
    <script src="path/to/chart.js"></script>
    <script src="path/to/your-php-data-script.php"></script>
    <script src="path/to/your-chart-creation-script.js"></script>
</body>
</html>
<script>
    // Wait for the DOM to be ready
document.addEventListener('DOMContentLoaded', function() {
    // Access the data from PHP
    var data = chartData;

    // Create a chart using Chart.js
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar', // Change the chart type as needed (e.g., bar, line, pie)
        data: {
            labels: data.map(d => d[0]), // Extract labels from data
            datasets: [{
                label: 'Chart Title',
                data: data.map(d => d[1]), // Extract values from data
                backgroundColor: 'rgba(75, 192, 192, 0.2)', // Customize the chart appearance
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true, // Enable responsiveness
            // Add more options as needed (e.g., title, scales, tooltips)
        }
    });
});

</script>