Фильтр данных графика JavaScript по диапазону дат - Django Project

Я хочу создать Javascript диаграмму с селектором даты в моем Django проекте, как в этом примере: https://plotlydash.com/pie-chart-with-drop-down-list-and-date-picker-range-in-plotly-dash/

Я уже создал входной селектор даты в моем chart.html файле, который позволяет мне добавлять входное значение даты к URL, когда я нажимаю "создать отчет". (Например: будет добавлено: ?start=2022-02-02&end=2022-02-24). Я также смог вызвать эти две даты по {{request.GET.start}} и {{request.GET.start}} в моем HTML.

Данные моего графика основаны на списке словарей, который определен в 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]

Моя диаграмма JavaScript: 

  <!-- 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 ({{request.GET.start}} - {{request.GET.end}} )</h6>
  </div>
  <!-- Card Body -->
  <div class="card-body">
      <div class="chart-area">
        <canvas id="myPieChart"></canvas>
                                        
       <script> 
         var ctx = document.getElementById("myPieChart");

   var startDate = new Date({{request.GET.start}});
   var endDate = new Date({{request.GET.end}});   
   var rawData =  {{mylist}}   
          
   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

Я уже определил начальную и конечную дату в диаграмме Javascript. Что нужно сделать, чтобы отфильтровать mylist в этом диапазоне дат, чтобы новые выбранные данные заменили data: {{count}} ?

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