JS script is not included in Django project

I'm learning django and have a problem. JS script is not included in Django project. The path is correct, the page itself with the graph block works, but the output of a round or bar chart does not occur.

index.html
{% extends 'partials/base.html' %}
{% block title %}Home Page{% endblock %}

{% block content %}
<div class="row ">
    <div class="col-md-6 my-4">
        <div class="bg-white">
            <div class="card-body">
                <canvas id="myChart1" width="400" height="300"></canvas>
                <script src="{% static 'main.js' %}"></script>

            </div>
        </div>
    </div>
    <div class="col-md-6 my-4">
        <div class="bg-white">
            <div class="card-body">
                <canvas id="myChart" width="400" height="300"></canvas>
                <script>
                    var ctx = document.getElementById('myChart').getContext('2d');
                    var myChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: [{% for order in order %} '{{order.name}}',{% endfor %}],
                    datasets: [{
                        label: 'Orders',
                        data: [{% for order in order %} {{ order.order_quantity }}, {% endfor %}],
                        backgroundColor: [
                            '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)'
                        ],
                            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: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                    });
                </script>
            </div>
        </div>
    </div>
</div>
{% endblock %}
base.html
<!--Chartjs CDN-->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
    <!--Custome CSS-->
    <link rel="stylesheet" href="/css/style.css">
    <title>{% block title %} {% endblock %}</title>
  </head>
  <body>
    {% include 'partials/nav.html' %}

    {% include 'partials/topnav.html' %}
     <div class="container">

        {% block content %}

        {% endblock %}
    </div>
    <!-- Optional JavaScript; choose one of the two! -->
settings.py
STATIC_URL = '/static/'

MEDIA_ROOT = (BASE_DIR/"media/")

MEDIA_URL = '/media/'

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

I tried to translate the js script into a separate file, but it didn’t work. How can you solve the problem?

Make sure to run python3 manage.py collectstatic for Django to collect your files for the project.

Back to Top