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.
