i want to create real time graph with scrolling time such as in the following video:https://www.youtube.com/watch?v=2-tnkzG0sKU
is this possible with chart.js? I have so far the following, it is scrolling but the time is not showing up, i want to show in seconds.
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
//}
}
}
}
};thanks
Easyest way to achieve this is by using the streaming plugin for chart.js: https://nagix.github.io/chartjs-plugin-streaming/master/guide/#table-of-contents
You will get something like this where in your onRefresh you add your data.
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()
});
});
}
}
}
}
}
});