<canvas id="myChart" width="400" height="200" data-chart-data='{{ json_encode($financialData["revenue_by_day"]) }}'></canvas>
<script>
document.addEventListener("DOMContentLoaded", function() {
const canvas = document.getElementById('myChart');
const chartData = JSON.parse(canvas.getAttribute('data-chart-data'));
// Extract labels (day_name) and values (revenue)
const labels = chartData.map(entry => entry.day_name);
const dataValues = chartData.map(entry => entry.revenue);
const ctx = canvas.getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Revenue',
data: dataValues,
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: { beginAtZero: true }
}
}
});
});
</script>