Estoy tratando de cambiar los datos de un gráfico usando la identificación dada en un cuadro de selección, para eso usé un evento onChange:

 <label for="patientId">Choose a patient:</label> <select name="patient" id="patient" onchange="myFunction(this.value)"> {% for item in patientId %} <option value="{{item}}"> {{item}} </option> {% endfor %} </select> <canvas id="weeklyChart"></canvas>

Los datos del gráfico son un objeto de error que se ve así:

 var myLineChart = new Chart(ctx, { type: 'line', data: { labels: {{ hourArray|safe}}, 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}}, }], }, }

En la función onChange tengo la siguiente lógica:

 function myFunction(val) { let hourArray = []; let glucoseArray = []; for (let i = 0; i < deviceList.length; i++) { if (deviceList[i].patientId == val) { hourArray.push(deviceList[i].hour); glucoseArray.push(deviceList[i].glucoseValue); } } myLineChart.data.datasets[0].data = glucoseArray; myLineChart.data.labels = hourArray; console.log(myLineChart.data.datasets[0].data); console.log(myLineChart.data.labels); }

En el archivo console.log() tengo exactamente los datos que necesito, pero no pasa nada en la página. ¿Qué puedo hacer para que mi función represente los datos correctos para el gráfico?