Listening onchange events on a dropdown to update a chart data list

I’m trying to figure it out how can I create an onchange event to listen to the value from the dropdown, so the chart will change it values depending on that id, for that I have the following elements:

In views.py:

def html(request, filename):
    #Data for the graph
    id = list(Device.objects.values_list('patientId', flat=True).distinct())
    labels = list(Device.objects.values_list('hour', flat=True))
    glucose_data = list(Device.objects.values_list('glucoseValue', flat=True))
    data =  glucose_data
    formatted_data = select_formatted_date(labels)
    lastPatientData = Device.objects.filter(patientId = id[-1])
    #the last element added
    hourArray = []
    glucoseArray = []
    for item in lastPatientData:
        lastPatientHour = Device._meta.get_field('hour')
        lastPatientGlucose = Device._meta.get_field('glucoseValue')
        formattedHour = lastPatientHour.value_from_object(item)
        frt_hour = formattedHour.strftime('%Y-%m-%d %H:%M:%S')
        formattedGlucose = lastPatientGlucose.value_from_object(item)
        hourArray.append(frt_hour)
        glucoseArray.append(formattedGlucose)
    device_list = list(Device.objects.all())
    for device in device_list:
        print(device)

    #f = DateRangeForm(request.POST)
    context = {"filename": filename,
               "collapse": "",
               "hourArray":hourArray,
               "glucoseArray": glucoseArray,
               "patientId": id,
               "dataSelection": formatted_data,
               "deviceList": device_list,
               "labels": json.dumps(labels, default=str),
               "data": json.dumps(data)
               }
return render(request, f"{filename}.html", context=context)

In forms.py, I have this, but I really don’t know what to do with this data:

from django import forms

idsList = forms.ModelChoiceField(queryset = Device.objects.values_list('patientIId'),widget = forms.Select(attrs = {'onchange' : "myFunction()"}))

my model is:

class Device (models.Model):
    patientId = models.IntegerField(unique=True)
    deviceId = models.CharField(unique=True,max_length=100)
    hour = models.DateTimeField()
    type = models.IntegerField()
    glucoseValue = models.IntegerField()

And in the index.html, I have the following(in data and label fields):

    <label for="patientId">Choose a patient:</label>
       <select name="patient" id="patient">
          {% for item in patientId %}
            <option value="{{item}}">
              {{item}}
            </option>
          {% endfor %}
        </select>

<div class="card-body">
 <div class="chart-area">
  <canvas id="weeklyChart"></canvas>
 </div>
</div>

The chart value is stored in a script tag, as follows:

var ctx = document.getElementById("weeklyChart");
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: {{ hourArray|safe}},//here in the labels
    datasets: [{
      label: "Value",
      lineTension: 0.3,
      backgroundColor: "rgba(78, 115, 223, 0.05)",
      borderColor: "rgba(78, 115, 223, 1)",
      pointRadius: 3,
      pointBackgroundColor: "rgba(78, 115, 223, 1)",
      pointBorderColor: "rgba(78, 115, 223, 1)",
      pointHoverRadius: 3,
      pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
      pointHoverBorderColor: "rgba(78, 115, 223, 1)",
      pointHitRadius: 10,
      pointBorderWidth: 2,
      data: {{ glucoseArray|safe}},//and the other coordinate is here
    }],
  }
);

My question is what is the most efficient method to change that chart values based on the id that I’m choosing from the dropdown.