Hi my goal is to display a chart using chartjs with plain html/css/js I am not using any framework.
I have my method backend side that returns a context with the following elements:
context = {'client_id' : client_id, 'year' : year, 'spending' : monthly_spending}
The goal is on my frontend to display a bar chart with the spending for each month in a year.
I tried many things but nothing load I get error.
What I did basically /
{% block body %}
<section>
<div>
<canvas id="spendingChart" width="500" height="500"></canvas>
</div>
</section>
</main>
{% endblock body %}
{% block script %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js"></script>
<script>
const spendingData= {{ monthly_spending | safe }}
const myChart = new Chart(document.getElementById('spendingChart').getContext("2d"), {
type: 'line',
data: {
datasets: [{
label: 'spending Over Time',
data: spendingData,
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
fill: true,
}]
},
options: {
responsive: true,
scales: {
x: { type: 'time', title: { display: true, text: 'Date' } },
y: { title: { display: true, text: 'spending' } }
}
}
});
</script>
{% endblock %}
Nothing loads and I have 2 errors in my console but I am not sure what to do:
Uncaught SyntaxError: Cannot use import statement outside a module (at chart.min.js:1:1)
Uncaught SyntaxError: Unexpected token 'const' (at 1:50:5)