Отображение диаграммы ChartJS в Django

В настоящее время я пытаюсь реализовать граф в своем приложении django. Я создал HTML-страницу для отображения жестко запрограммированных деталей из моего класса views.py. Однако когда я загружаю веб-страницу, я вообще не вижу диаграммы. Вот как я пытался реализовать график:

Взгляды

В этом классе я создаю представления, которые будут отображаться на графике. Я пока жестко закодировал некоторые данные, просто чтобы график заработал.

User = get_user_model()
#where i am viewing the chart, calling the html page.
class ChartView(View):
    def get(self, request, *args, **kwargs):
        return render(request, 'nutrition/chart.html', {"users": 10})



class ChartData(APIView):
    authentication_classes = []
    permission_classes = []
#hard-coded data that i am trying to display on the chart
    def get(self, request, format=None):
        qs_count = User.objects.all().count()
        labels = ["Users", "Blue", "Yellow", "Green", "Purple", "Orange"]
        default_items = [qs_count, 12, 22, 13, 11, 15]
        data = {
            "labels": labels,
            "default": default_items,
        }
        return Response(data)

URL

URL-адреса, которые я использую для отображения страниц, являются расширением для nutrition/, URL-адреса.

urlpatterns = [
#url for the webpage to display the chart
    url('^chart/$', ChartView.as_view(), name='chart'),
#url to show the data using the django rest_framework
    url('^api/chart/data/$', ChartData.as_view()),

HTML

Здесь я пытаюсь отобразить диаграмму. Я вызываю переменные из класса представления и рисую их на гистограмме.

<script>
    {% block jquery %}
        var endpoint = '/api/chart/data/'
        var defaultData = []
        var labels = [];
        $.ajax({
            method: "GET",
            url: endpoint,
            success: function(data) {
                labels = data.labels
                defaultData = data.default
                setChart()
            },
            error: function (error_data) {
                console.info("error")
                console.info(error_data)

            }
        })

        function setChart() {
              var ctx = document.getElementById("myChart");
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: '# of Votes',
                        data: defaultData,
                    }]
                },

            });
        }


    {% endblock %}
</script>

{% block body %}
    <div class = "row">
    <div class = "container">
        <div class = "col-sm-12" url-endpoint = "'{% url "nutrition:api-data" %}">
            <h1>Nutrition Chart</h1>
            <canvas id = "myChart" width = "400" height = "400"></canvas>
        </div>
        </div>
    </div>
{% endblock body %}

Я следил за учебником, который я связал здесь: https://thewikihow.com/video_B4Vmm3yZPgc

Редактировать

Это снимок экрана с добавленной сплошной рамкой, показывающей, где должен отображаться график.