Create a JavaScript chart in HTML with a date selector

Question

My chart data is based on a list of dictionaries. It's a Django project, so my data is defined in views.py: I count the number of records with Mike, Jane and Jack.

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]

I have already drawn a pie chart based on my total counted data in my chart.HTML file :

  <!-- 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>

Instead of getting the total count, I want to draw the chart based on a selected time range. I want to input a date range and draw the same pie chart based on that date range. I tried the following codes to add the input dates in my chart.HTML file:

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

The output of this date selector on my HTML page is:

This step will allow me to append the input date value to URL when I click "generate report". For example: it will append: ?start=2022-02-02&end=2022-02-24 in the URL link.

I don't know how to link these input dates(URL appended with input dates) with the first field of my list(Date) in my pie chart. I think I should add date data in my javascript file. Maybe I should add something here data: {{count}}.

If I understand well, your real issue is how to send back the information from Javascript to your python script that gets and computes the data. I have never worked on Django but I see three possibilities: Reload the current page by adding the two dates as URL parameters and use those in view.py. The second would be to do an HTTP request to another URL, that you create on Django, that will return the data for the chart and then update the chart. Last one would be to create a Javascript variable that stores `myList`and initialize `count` in a JS function. — T.Trassoudaine, Feb 21 '22 at 16:48
@T.Trassoudaine Thank you so much. Your first idea is what I wanted to do. However, I searched anywhere and don't know how to solve it. I'm new to Python, javascript and Django. Could you please explain more on this — Mary, Feb 21 '22 at 16:51
@T.Trassoudaine What should I add in my `view.py` and the "input dates" part in my `HTML` file — Mary, Feb 21 '22 at 16:55
Maybe [this](https://stackoverflow.com/questions/6225130/how-to-get-url-parameters-in-a-django-view) could help you for the Django part. For the Javascript part: on a button click, get the two dates, convert them into string, make sure the result can be used in URL, use something like `window.location.href` to reload the page with the new parameters ([example](https://stackoverflow.com/questions/5997450/append-to-url-and-refresh-page)) — T.Trassoudaine, Feb 21 '22 at 17:06
@T.Trassoudaine I carefully checked out all these linked resources you provided to me, but I still don't understand the Javascript part clearly. Could you please write an example for my data in the answer area for the js part? — Mary, Feb 22 '22 at 14:10
Try to do it yourself and come back with some code. You can find many resources on the Internet that explains, for example, how to get the date value from an input date or execute something on button click in Javascript. — T.Trassoudaine, Feb 22 '22 at 16:31
@T.Trassoudaine I tried everything and none of them works. I tried for 2 weeks so I post it as a question. I don't want to add a button click in Javascript. I need the data section in JavaScript to be linked with the URL change. Thank you for your suggestions — Mary, Feb 22 '22 at 16:50
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/242279/discussion-between-t-trassoudaine-and-mary-ma). — T.Trassoudaine, Feb 22 '22 at 16:59

Create a JavaScript chart in HTML with a date selector

0 Answers0