Линейный график Google не печатается в Django

Я делаю проект по визуализации covid, т.е. когда пользователь выбирает определенное состояние, диапазон дат и тип вывода, соответствующий введенным данным, мы получаем вывод в виде графика, для которого я использую Google API для отображения линейных диаграмм. Проблема, возникающая сейчас, заключается в том, что график не отображается на сайте, но данные передаются из бэкенда python views в HTML.

HTML


    <div id="chart_div">
      <script type="text/javascript">

          google.charts.load('current', {packages: ['corechart', 'line']});
          google.charts.setOnLoadCallback(drawBasic);
          function drawBasic() {
              var data = new google.visualization.DataTable();
              data.addColumn('string', 'X');
              data.addColumn('number', {{user_required_type_json|safe}});

              data.addRows({{chart_list_json|safe}});

              var options = {
              hAxis: {
                  title: 'Dates',
                  textStyle: {
                      color: '#1a237e',
                      fontSize: 14,
                      fontName: 'Calibri',
                      bold: true
                  },
                  titleTextStyle: {
                      color:'#1a237e',
                      fontSize: 22,
                      fontName: 'Calibri',
                      bold: true,
                  },
              },
              vAxis: {
                  title: {{user_required_type_json|safe}},
                  textStyle: {
                  color: '#1a237e',
                  fontName: 'Calibri',
                  fontSize: 18,
                  bold: true
                  },
                  titleTextStyle: {
                      color: '#1a237e',
                      fontName: 'Calibri',
                      fontSize: 22,
                      bold: true
                  },
              },
              title: {{user_input_state_json|safe}}+' '+{{user_required_type_json|safe}}+' Data'
              };

              var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

              chart.draw(data, options);
              }

      </script>
  </div>

views.py

import json
from django.shortcuts import render
from django.http import HttpResponse
import requests
import datetime as dt


def indexview(request):
    url=requests.get('https://data.covid19india.org/v4/min/timeseries.min.json')
    json_data=url.json()

    user_input_state=''
    user_input_date_from='2021-10-01'
    user_input_date_to='2021-10-10'
    user_data_type=''
    user_required_type=''
    if request.method == 'POST': 
        user_input_state=request.POST.get('state') 
        user_input_date_from=request.POST['date_from']
        user_input_date_to=request.POST['date_to']
        user_data_type=request.POST.get('data_period') #cumulative or daily
        user_required_type=request.POST.get('required_type') #confirmed, recovered.....
        #To store dates list

    # print('State is '+user_input_state)
    # print('Date from '+user_input_date_from)
    # print('User date is '+user_input_date_to)
    # print('User data type '+user_data_type)
    # print('User required type is '+user_required_type)
    start_date =user_input_date_from
    end_date = user_input_date_to
    start_date_object = dt.datetime.strptime(start_date,"%Y-%m-%d").date()
    end_date_object = dt.datetime.strptime(end_date,"%Y-%m-%d").date()
    days = end_date_object - start_date_object
    dates=[]
    otp=[]
    for i in range(days.days+1):
        dates.append(str(start_date_object+dt.timedelta(days=i)))
    
    for i in dates:
        try:
            otp.append(json_data[user_input_state]['dates'][i][user_data_type][user_required_type])
        except KeyError:
            otp.append(0)

    chart_list = [list(a) for a in zip(dates,otp)]
    #chart_list.insert(0,['Dates','Values'])
    chart_list_json=json.dumps(chart_list)
    user_input_state_json=json.dumps(user_input_state)
    user_required_type_json=json.dumps(user_required_type)
    dict_pass={
        'dates':dates,
        'otp':otp,
        'chart_list':chart_list,
        'chart_list_json':chart_list_json,
        'user_input_state_json':user_input_state_json,
        'user_required_type_json':user_required_type_json
        }
    return render(request,'index.html',dict_pass)
    

Вебсайт отображается следующим образом введите описание изображения здесь

Может ли кто-нибудь объяснить, почему мой график не отображается завтра - это дата моей подачи.
Заранее спасибо

только что заметил, что элемент <script> находится внутри элемента <div> диаграммы.
Когда диаграмма google будет построена, она заменит все содержимое внутри <div>
. рекомендуем переместить <script> за пределы <div>

В остальном график, похоже, работает нормально с предоставленными данными.

смотрите следующий рабочий фрагмент...

google.charts.load('current', {
  packages: ['corechart', 'line']
});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'X');
  data.addColumn('number', 'test');

  data.addRows([["2021-10-01", 809], ["2021-10-02", 865], ["2021-10-03", 765], ["2021-10-04", 429], ["2021-10-05", 671], ["2021-10-06", 800], ["2021-10-07", 643], ["2021-10-08", 693], ["2021-10-09", 629], ["2021-10-10", 624], ["2021-10-11", 310], ["2021-10-12", 503], ["2021-10-13", 517], ["2021-10-14", 540], ["2021-10-15", 586]]);

  var options = {
    hAxis: {
      title: 'Dates',
      textStyle: {
        color: '#1a237e',
        fontSize: 14,
        fontName: 'Calibri',
        bold: true
      },
      titleTextStyle: {
        color: '#1a237e',
        fontSize: 22,
        fontName: 'Calibri',
        bold: true,
      },
    },
    vAxis: {
      title: 'test',
      textStyle: {
        color: '#1a237e',
        fontName: 'Calibri',
        fontSize: 18,
        bold: true
      },
      titleTextStyle: {
        color: '#1a237e',
        fontName: 'Calibri',
        fontSize: 22,
        bold: true
      },
    },
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

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