Estoy tratando de mostrar datos en vivo del último día, semana, mes, etc. Actualmente, el gráfico muestra solo una sección de datos en vivo, pero me gustaría que se muestren más. Estoy usando un gráfico de barras por ahora, y sé que los datos en vivo tienen el mismo tiempo registrado, pero quería ver si hay una manera de mostrar más de 20 puntos en el gráfico. Agregué el código que creo que debería editar. Probé tics y límites, pero es un poco difícil para mí navegar exactamente lo que quiero en el sitio chart.js .

Editar: después de algunas correcciones en mi base de datos, puedo ver más puntos de datos mostrados. Sin embargo, cuando elijo "mes pasado", se supone que debo tener todos los puntos registrados del mes pasado. ¿Sería más razonable mostrar un diagrama de dispersión con una línea que lo atravesara?

A continuación se muestra la imagen de prueba de la aplicación y el bloque de código:

Imagen de prueba de la aplicación

 var myChart = document.getElementById("chart").getContext('2d'); gradient = myChart.createLinearGradient(0, 0, 0, 400); gradient.addColorStop(0, 'rgba(29, 140, 248, 0.75)'); gradient.addColorStop(0.5, 'rgba(29, 140, 248, 0.5)'); gradient.addColorStop(1, 'rgba(29, 140, 248, 0)'); // Global Options Chart.defaults.global.defaultFontFamily = 'inherit'; Chart.defaults.global.defaultFontSize = 18; //Effects x and y's number font size Chart.defaults.global.defaultFontColor = '#777'; barchart = new Chart(myChart, { type:'bar', data: { labels: {{ data.x_vals | tojson }}, datasets:[{ label:'Liquid Level', data: { { data.y_vals } }, backgroundColor: gradient, borderWidth:1, //Effects plotted line on chart borderColor:'white', hoverBorderWidth:1, hoverBorderColor:'white', barThickness:15 }] }, options: { legend: { display:true, position:'right', labels: { fontColor:'#000' } }, scales: { yAxes: [{ display: true, ticks: { suggestedMin: 0, steps: 10, stepValue: 10, max: 100 } }], xAxes: [{ display: true, ticks: { autoSkip: true, padding: 4, fontSize: 12 } }] }, layout:{ padding:{ left:0, right:0, bottom:0, top:0 } } } });