quiero crear un gráfico en tiempo real con tiempo de desplazamiento como en el siguiente video: https://www.youtube.com/watch?v=2-tnkzG0sKU
¿Es esto posible con chart.js? Hasta ahora tengo lo siguiente, se está desplazando pero el tiempo no aparece, quiero mostrarlo en segundos.
let dataSize = 500; let readings = new Array(dataSize); // data object for the chart: const data = { // X axis labels labels: new Array(), datasets: [{ data: readings, // the data to chart borderColor: '#272323', // line color (lavender) pointRadius: 0.5 // point size }] }; const config = { type: 'line', // type of chart data: data, // the data options: { animation: false, // remove animation to speed drawing up responsive: true, maintainAspectRatio: false, scales: { // axis ranges: y: { type: 'linear', min: 0, max: 255 }, x:{ // ticks:{ type: 'time', time:{ //unit:'second', displayFormats: {hour: 'mm:ss'} }, min:0, max: dataSize, //beginAtZero: true, maxTicksLimit: dataSize/2 //} } } } };Gracias
La forma más fácil de lograr esto es usar el complemento de transmisión para chart.js: https://nagix.github.io/chartjs-plugin-streaming/master/guide/#table-of-contents
Obtendrá algo como esto donde en su onRefresh agrega sus datos.
npm i chartjs-plugin-streaming
import ChartStreaming from 'chartjs-plugin-streaming'; import 'anyDatAdapterFromAhichDateLibYouAreUsing'; Chart.register(ChartStreaming); const myChart = new Chart(ctx, { options: { scales: { x: { type: 'realtime', realtime: { onRefresh: function(chart) { chart.data.datasets.forEach(function(dataset) { dataset.data.push({ x: Date.now(), y: Math.random() }); }); } } } } } });