Линейный график 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>