CODEWITHSUNDEEP
javascriptdjangochart.js
BenD2525
BenD2525

Reputation: 97

Why is Chart.js not rendering? Error: Uncaught ReferenceError: Chart is not defined

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 class="container-fluid p-3 bg-primary text-white text-center">
        <div class="row text-center">
            <div class="col-sm-12">
                <h1 class="display-1">Your Health Now</h1>
            </div>
            <!-- Navbar with burger menu -->
            <div class="sm-12 text-center">
                <nav class="navbar navbar-expand-lg navbar-dark bg-blue">
                    <div class="container-fluid">
                        <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse"
                            data-bs-target="#n_bar" aria-controls="navbarNavAltMarkup" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon ms-auto"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="n_bar">
                            <ul class="nav navbar-nav ms-auto">
                                <li class="nav-item"><a class="nav-link text-white"
                                        href="{% url 'HealthHub:home' %}"><strong>Home</strong></a></li>
                                {% if user.is_authenticated %}
                                <li class="nav-item"><a class="nav-link text-white"
                                        href="{% url 'HealthHub:health_hub' %}"><strong>My Health</strong></a></li>
                                <li class="nav-item"><a class="nav-link text-white"
                                        href="{% url 'account_logout' %}"><strong>Logout</strong></a></li>
                                {% else %}
                                <li class="nav-item"><a class="nav-link text-white"
                                        href="{% url 'account_login' %}"><strong>Login</strong></a></li>
                                {% endif %}
                                <li class="nav-item"><a class="nav-link text-white"
                                        href="{% url 'account_signup' %}"><strong>Signup</strong></a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </div>
    <!-- Main Content -->
    <div class="container-fluid text-center">
        <div class="row justify-content-center">
            <div class="col-sm-8">
                {% block content %}

                {% endblock content %}
            </div>
        </div>
    </div>
    <!-- Footer -->
    <footer class="container-fluid fixed-bottom bg-secondary">
        <a href="#" class="btn btn-secondary float-end">Back to top</a>
        <a href="https://github.com/BenD2525" target="_blank" rel="noopener" aria-label="GitHub" class="text-white">Ben
            Dawson<i class="fa-brands fa-github" 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>

Upvotes: 1

Views: 2869

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31361

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.

Upvotes: 1

Related Questions