Построить график в 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 файле :

  <div class="card-body">
   <div class="chart-pie pt-4">
      <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>

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

<label>
    Start Date:
    <input type="date" name="bday">
  </label>

<label>
    End Date:
    <input type="date" name="bday">
  </label>

но я не знаю, как связать эти введенные даты с первым полем моего списка (Дата) в моей круговой диаграмме

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