Прослушивание событий onchange на выпадающем списке для обновления списка данных графика

Я пытаюсь понять, как я могу создать событие onchange для прослушивания значения из выпадающего списка, чтобы график менял свои значения в зависимости от этого id, для этого у меня есть следующие элементы:

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

В файле forms.py у меня есть это, но я действительно не знаю, что делать с этими данными:

from django import forms

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

моя модель:

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

В index.html у меня есть следующее (в полях data и label):

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

Значение графика хранится в теге сценария, как показано ниже:

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
    }],
  }
);

Мой вопрос в том, какой наиболее эффективный метод изменения значений графика на основе id, который я выбираю из выпадающего списка.

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