0
292
Views¿Cómo mostrar un rango de datos específico en el conjunto de datos de mi gráfico usando Zoom y Pan en Chart.js 3.+?
Tengo un gráfico de líneas para los mensajes enviados x día/mes y también tengo dos selectores de fechas encima. Quiero poder seleccionar una fecha de inicio, una fecha de finalización y el gráfico lee esas fechas y muestra exactamente este rango de puntos. Ya tengo el zoom y la panorámica configurados en mi archivo chart.js y puedo hacerlo manualmente, pero me preguntaba cómo puedo hacerlo a través de lo que acabo de describir.
En esta imagen ya tengo 3 meses de datos. Siempre comienza mostrando 1 mes.
·
Juan Pablo Isaza
1 answers
Answer question0
¡Lo hice! Creé una función para ser llamada después de cada cambio de fecha en mi selector de fechas que es así:
function filterDate(initialDate, finalDate){ //first I cloned my dataset [labels (x) and data (y)] like this: labelsData2 = [...labelsData]; sentData2 = [...sentData]; //then I used the datepicker's values to pinpoint the index of both dates (initial and final) on my labelsData2 array, sliced the array so it now contains only the range of dates that I want and stored the value on labelsData2 again labelsData2 = labelsData2.slice(labelsData2.indexOf(initialDate), mesesData2.indexOf(finalDate) + 1); //<- +1 to prevent the index 0 to mess my result. //I used the same indexOf to slice my sentData2 array as well, since they have the same length. sentData2 = sentData2.slice(labelsData2.indexOf(initialDate), mesesData2.indexOf(finalDate) + 1); //then I updated my chart! myChart.data.datasets[0].data = sentData2; myChart.data.labels = labelsData2; myChart.update(); }
·
Juan Pablo Isaza
Report
Answer question