Feeling absolutely frustrated, I've been struggling with implementing chart.js on my Django website. All I want to do is plot two fields: Dates and Scores. Dates are in the format of `1/6/2022`, while scores are floats. The problem arises when passing a Python list to the script – it just doesn't cooperate. Strangely enough, manually inputting the list directly into the chart's data works perfectly fine. It's as though the script refuses to recognize it as a variable, which makes no sense at all. I've scoured the internet for answers, but haven't found anything helpful.
views.py
def progress(response):
lessons = StudentLessons.objects.get(name=response.user.email)
scores = []
dates = []
for lesson in lessons.lesson_set.all():
dates.append(str(lesson.date))
scores.append(str((lesson.accuracy+lesson.speed+lesson.understanding)/3))
context = {
'dates': dates,
'scores': scores,
}
return render(response, "main/progress.html", context)
dates = ['2022-09-27', '2022-09-28'] scores = ['4.333333333333333', '6.0'] (from console) Correctly displayed chart HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
<script type="text/javascript">
var myChart = new Chart("myChart",{
type:"line",
data: {
labels: ['2022-09-27', '2022-09-28'],
datasets:[{
borderColor: "rgba(0,0,0,0.1)",
data: ['4.333333333333333', '6.0']
}]
},
options:{
responsive: true,
legend: {
position: 'top',
},
}
});
</script>
HTML that doesn't work:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
<script type="text/javascript">
var myChart = new Chart("myChart",{
type:"line",
data: {
labels: {{dates}},
datasets:[{
borderColor: "rgba(0,0,0,0.1)",
data: {{scores}}
}]
},
options:{
responsive: true,
legend: {
position: 'top',
},
}
});
</script>
I would greatly appreciate any assistance with this issue. It's driving me crazy, and it's the final piece of the puzzle I need to solve.