Нужна помощь для отображения графика внутри веб-страницы в окне выбора диапазона дат в Django

#javascript #python #django

Вопрос:

Я создал форму в своей html-форме для выбора диапазона дат с помощью daterangepicker и передал ее views.py в ДЖАНГО. После нажатия кнопки отправить (ОПУБЛИКОВАТЬ), views.py функция вызывается через url.py и получил результат запроса БД и повторил JsonResponse. теперь проблема в том, что моя веб-страница перенаправляется на новую веб-страницу. Но я хочу оставаться на той же веб-странице и отображать график.

HTML-страница-это

 <div>
    <form action="/reportgeneration" method="POST">
        {% csrf_token %}
        <input type="text" name="daterange" />
        <input type="submit" value="Submit">
    </form>
</div>

<div id="EnegryChart"></div>
    <script>
    var start = moment().subtract(29, 'days');
    var end = moment();

    $(function () {
        $('input[name="daterange"]').daterangepicker({
            opens: 'left',
            showDropdowns: true,
            "drops": "auto",
            startDate: start,
            endDate: end,
            locale: {
                      format: 'YYYY-MM-DD'
                    },
            ranges: {
                      'Today': [moment(), moment()],
                      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                      'This Month': [moment().startOf('month'), moment().endOf('month')],
                      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, function (start, end, label) {
            console.log("A new date selection was made: "   start.format('YYYY-MM-DD')   ' to '   end.format('YYYY-MM-DD'));
        });
    });
    </script>
 

и мой URL.py является

 urlpatterns = [
   ........
    path('reportgeneration', views.reportgeneration),
    
    .....
 

и views.py является

 def reportgeneration(request):
    ........
    if request.method == "POST":
        date_range = request.POST.get('daterange').split(" - ")
        print(date_range[0], date_range[1])
        start = date_range[0].split("-")
        end = (date_range[1].split("-"))

        start_dt = date(int(start[0]), int(start[1]), int(start[2]))
        end_dt = date(int(end[0]), int(end[1]), int(end[2]))
        for dt in daterange(start_dt, end_dt):
            datereport = dt.strftime("%Y-%m-%d")
            print(datereport)
    queryKeys = "<db query sting>"

    for dt in daterange(start_dt, end_dt):
        datereport = dt.strftime("%Y-%m-%d")
        sql = "select "   queryKeys   "from <db>  where Current_date = "   
            "'" datereport "' and siteName= '" action1 "'"
        print(sql)
        energyRecords = dbClient.query(sql)
        for item3 in energyRecords.get_points():
          <creating eergylist>
          
        energyreportdata = {
            'list_moth_data':  data,
            'list_moth_Current_date':  date,
            
        }
        print("energy report ", energyreportdata, dicvar)
    return JsonResponse(energyreportdata)
 

Я использую график plotly для получения данных и даты с помощью построения графика веб-страницы