Создание графика JavaScript в HTML с помощью селектора даты

Я использовал gspread и pandas для преобразования моего google sheet в список словарей. Мой лист google отображается в виде следующего списка: (Это очень длинный список, поэтому я привожу только несколько строк)

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}]

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

tsheet2022 = client.open('Return Record 2022')
tinstance2022 = tsheet2022.get_worksheet(0)
mylist = tinstance2022.get_all_records()
mike=len(tuple(d for d in t2022  if d['Receiver'] == 'Mike'))
jane=len(tuple(d for d in t2022  if d['Receiver'] == 'Jane'))
jack=len(tuple(d for d in t2022  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)",
                                                           }],
                                                          },
              options: {
              maintainAspectRatio: false,
              tooltips: {
              backgroundColor: "rgb(255,255,255)",
              bodyFontColor: "#858796",
              borderColor: '#dddfeb',
              borderWidth: 1,
              xPadding: 15,
              yPadding: 15,
              displayColors: false,
              caretPadding: 10,
                                },
              legend: {
              display: false
                                 },
              cutoutPercentage: 40,
                                 },
                               });
                           </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

Я не знаю, как связать эти введенные даты с первым полем моего списка (Date) в моей круговой диаграмме. Я думаю, что мне нужно добавить данные о датах в мой файл javascript. Как мне добавить их и связать с моим селектором даты?

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