Не удается передать данные из представления в js-файл, имеющий диаграммные js-коды, появляется неожиданная синтаксическая ошибка

Я пытаюсь сделать аналитику для моего webapp, где она должна графически отображать данные из базы данных. Для этого я использую chart js. Я изучаю как это сделать на youtube. Странно, но они не получают никаких ошибок, а я получаю вот это

Uncaught SyntaxError: Unexpected token '{'

вот коды, которые я написал

views.py

 monthly_visitor = VisitorCount.objects.all().values(
    'date_of_record__month'
    ).annotate(
        total_in_month=Count('ip') # take visitor_id or whatever you want to count
        ).order_by()

    yearly_visitor = VisitorCount.objects.all().values('date_of_record__year').annotate(
        total_in_year= Count('ip')
    ).order_by()

    print("\nthe values of monthly visitors are", monthly_visitor, "\n")

    visitorMonthNumber = []
    visitorNumberMonthly = []

    
    for i in range(len(monthly_visitor)):

        visitorMonthNumber.append(monthly_visitor[i]['date_of_record__month'])
        visitorNumberMonthly.append(monthly_visitor[i]['total_in_month'])   
    
    print("\nthis is the list of month number =", visitorMonthNumber, "\n", "\nthis is the number of visitors", visitorNumberMonthly, "\n")
       

    
     context = {
        'visitorMonthNumber':  visitorMonthNumber,
        'visitorNumberMonthly':  visitorNumberMonthly
    }

    return render(request, "chart.html", context)
   

В приведенном выше коде я запрашиваю модель с именем visitor count, чтобы получить количество посетителей в каждом месяце.

js файл

var visitorMonthNumber = {{visitorMonthNumber}};
var visitorNumberMonthly = {{visitorNumberMonthly}};
const visitorM = document.getElementById('visitorMonthly').getContext('2d');
const visitorMonthly = new Chart(visitorM, {
    type: 'bar',
    data: {
        labels: visitorMonthNumber,
        datasets: [{
            label: 'Monthly Visitors',
            data: visitorNumberMonthly,
            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
            }
        }
    }
});

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

этот код печатает

print("\nthis is the list of month number =", visitorMonthNumber, "\n", "\nthis is the number of visitors", visitorNumberMonthly, "\n")

это результат и это то, что я хочу получить на графике

this is the list of month number = [12, 10, 11, 9, 1]

this is the number of visitors [3, 1, 1, 1, 1]

Вернуться на верх