Charts.js in Django: Charts cannot appear

Question

I am trying to create a charts app for my django project using Chart.js. I tried doing the very basic thing which I see in Youtube videos - which is to copy and paste the sample code given in https://www.chartjs.org/docs/latest/ in my file chart.html, but the chart doesn't appear when I tried running the project.

I have added the script tag with the chart.js link to my base.html, so I am very confused of what went wrong.

The following is my code:

base.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- semantic UI -->
    <link rel="stylesheet" type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">
    <!--Chart js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js" integrity="sha512-5vwN8yor2fFT9pgPS9p9R7AszYaNn0LkQElTXIsZFCL7ucT8zDCAqlQXDdaqgA1mZP47hdvztBMsIoFxq/FyyQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title>{% block title %}{% endblock title %}</title>
  </head>

  <body>
      {% block scripts %} {% endblock %}
      {% block content %} {% endblock %}
  </body>
</html>

chart.html

{% extends 'base.html' %}

{% block title %}Genre Popularity Ranking{% endblock title %}

{% block scripts %}
<script>
$(document).ready(function(){
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            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 %}

{% block content %}<canvas id="myChart" width="400" height="400"></canvas>{% endblock %}

Will really appreciate if anyone can help me out since I just started learning Django recently!

What do you see in your browser, can you open your browser dev tools tab and open the console? — partizanos, Jul 22 '21 at 09:41
There is Uncaught ReferenceError: $ is not defined. Is this due to JQuery? How can I possibly fix it? — confusion101, Jul 22 '21 at 09:48
yes it's due to jquery, check in the network tab of your dev tools if the library is indeed in the cdn url you request for. Then put the request for jequery on top of the requested libraries. — partizanos, Jul 22 '21 at 09:50
I just updated the CDN link for JQuery but the same error still occurs — confusion101, Jul 22 '21 at 09:52
I wrote in answer the code sample and an other way to ommit jquery since it's not strictly needed. — partizanos, Jul 22 '21 at 10:00

partizanos · Answer 1 · 2021-07-22T10:01:01.060

In case charts js requires jquery put it on top.

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- semantic UI -->
    <link rel="stylesheet" type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!--Chart js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js" integrity="sha512-5vwN8yor2fFT9pgPS9p9R7AszYaNn0LkQElTXIsZFCL7ucT8zDCAqlQXDdaqgA1mZP47hdvztBMsIoFxq/FyyQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- jQuery -->
    <title>{% block title %}{% endblock title %}</title>
  </head>

Also make sure in network tab of chrome that the requests you make are responding with 200. eg

Then inside your js code make sure you have jquery running:

<script>
$(document).ready(function(){ console.log(123); })
</script>

Otherwise you can just you use native js instead eg: $(document).ready equivalent without jQuery because since you have in console $ not defined your problem is jquery

Charts.js in Django: Charts cannot appear

1 Answers1