Добавление селектора даты для графика JavaScript в HTML

Данные моей диаграммы основаны на списке словарей. Это проект Django, поэтому мои данные определены в views.py: я подсчитываю количество записей с Майком, Джейн и Джеком.

mylist=
[{'Date': '2021-10-02', 'ID': 11773, 'Receiver': Mike},
{'Date': '2021-10-02', 'ID': 15673, 'Receiver': Jane},
{'Date': '2021-10-03', 'ID': 11773, 'Receiver': Mike},
... 
{'Date': '2021-12-25', 'ID': 34653, 'Receiver': Jack}]

mike=len(tuple(d for d in mylist  if d['Receiver'] == 'Mike'))
jane=len(tuple(d for d in mylist  if d['Receiver'] == 'Jane'))
jack=len(tuple(d for d in mylist  if d['Receiver'] == 'Jack'))
count = [mike, jane, jack]

Я уже построил круговую диаграмму на основе моих общих подсчитанных данных в моем chart.HTML файле :

  <!-- pie Chart -->
<div class="col-xl-4 col-lg-4">
  <div class="card shadow mb-4">
      <div
      class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
      <h6 class="m-0 font-weight-bold">Team Chart</h6>
  </div>
  <!-- Card Body -->
  <div class="card-body">
      <div class="chart-area">
        <canvas id="myPieChart"></canvas>
                                        
       <script> 
         var ctx = document.getElementById("myPieChart");
          var myPieChart = new Chart(ctx, {
           type: 'doughnut',
            data: {
              labels: ["Mike", "Jane", "Jack"],
              datasets: [{
                         data: {{count}} ,
              backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
              hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
              hoverBorderColor: "rgba(234, 236, 244, 1)",
                                                           }],
                                                          },
             
                               });
     </script>           
   </div>
</div>
</div>
</div>

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

<div class="d-sm-flex align-items-center justify-content-between mb-4">
  <form method="get" action="chart/">
    <div class="form-row">
     <label for="start">Start Date:</label>
     <div class="col">
        <input type="date" class="form-control" name="start" min="2020-01-03" required>
  </div>
  <label for="end">End Date:</label>
  <div class="col">
      <input type="date" class="form-control" name="end"  min="2020-01-03" required>
  </div>
  <button type="submit" class="btn btn-primary"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</button>
</div>
</form>

Вывод этого селектора даты на моей HTML-странице следующий: date

Этот шаг позволит мне добавлять значение даты ввода в URL, когда я нажимаю кнопку "Создать отчет". Например: он добавит: start=2022-02-02&end=2022-02-24 в ссылку URL.

Я не знаю, как связать эти даты ввода (URL, дополненный датами ввода) с первым полем моего списка (Дата) в моей круговой диаграмме. Я думаю, что мне нужно добавить данные о дате в мой файл javascript. Возможно, я должен добавить что-то здесь data: {{count}}.

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