I am trying to implement chart.js in my django project, and I am starting with the example graph used on the chart.js website, before then amending the data and tweaking it.
However, I can't yet get the default chart to pull through, and keep getting the error message: Uncaught ReferenceError: Chart is not defined This makes me think that the library isn't installed correctly, but I have used a few different CDNs and can't get it to work, any help would be much appreciated!
html template:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<canvas id="myChart" width="400" height="400"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Weight', 'Run Distance', 'Run Time', 'Date'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
{% endblock content %}
views.py:
def health_hub_tracker(request):
serialized_stats = []
for stats in HealthStats.objects.filter(user=request.user):
serialized_stats.append({
"weight": stats.weight,
"run_distance": stats.run_distance,
"run_time": stats.run_time,
"date": stats.date,
})
context = {
"stats": serialized_stats
}
print(serialized_stats)
return render(request, "health_hub_tracker.html", context)
base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% load static %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Oswald&display=swap" rel="stylesheet">
<!-- FavIcon -->
<link rel="icon" href="{% static 'favicon.ico' %}">
<!-- <a target="_blank" href="https://icons8.com/icon/DpuVIej1M9Br/health">Health</a> icon by <a target="_blank"
href="https://icons8.com">Icons8</a> -->
<title>Your Health Now</title>
</head>
<body>
<!-- Title -->
<div >
<div >
<div >
<h1 >Your Health Now</h1>
</div>
<!-- Navbar with burger menu -->
<div >
<nav >
<div >
<button type="button" data-bs-toggle="collapse"
data-bs-target="#n_bar" aria-controls="navbarNavAltMarkup" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="n_bar">
<ul >
<li ><a
href="{% url 'HealthHub:home' %}"><strong>Home</strong></a></li>
{% if user.is_authenticated %}
<li ><a
href="{% url 'HealthHub:health_hub' %}"><strong>My Health</strong></a></li>
<li ><a
href="{% url 'account_logout' %}"><strong>Logout</strong></a></li>
{% else %}
<li ><a
href="{% url 'account_login' %}"><strong>Login</strong></a></li>
{% endif %}
<li ><a
href="{% url 'account_signup' %}"><strong>Signup</strong></a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<!-- Main Content -->
<div >
<div >
<div >
{% block content %}
{% endblock content %}
</div>
</div>
</div>
<!-- Footer -->
<footer >
<a href="#" >Back to top</a>
<a href="https://github.com/BenD2525" target="_blank" rel="noopener" aria-label="GitHub" >Ben
Dawson<i aria-hidden="true"></i></a>
</footer>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous">
</script>
<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous">
</script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/cdefc89d16.js" crossorigin="anonymous"></script>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB VDvE9tvIXrMQaPlFFSUTR nldQm1LuPXQ=" crossorigin="anonymous"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk 8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
CodePudding user response：
You are loading your chart.js script after your content. Thats why it is undefined. Also you don't need 2 CDN's.
Best thing you can do is place the script tag to load chart.js in the head section that way you are always sure it is loaded before your own scripts run.