0👍
✅
The solution was to use Streaming Plugin and Zoom Plugin
var myLiveChart = new Chart(ctx,{
type: 'line',
data: startingData,
options: {
scales: {
x: {
type: 'realtime', // x axis will auto-scroll from right to left
realtime: { // per-axis options
duration: 10000, // data in the past 20000 ms will be displayed
refresh: 500, // onRefresh callback will be called every 1000 ms
delay: 10, // delay of 1000 ms, so upcoming values are known before plotting a line
pause: false, // chart is not paused
ttl: 60000, // data will be automatically deleted as it disappears off the chart
frameRate: 30, // data points are drawn 30 times every second
// a callback to update datasets
onRefresh: chart => {
let m1 = pick_counter_m1()
m1.then(function(result) {
// query your data source and get the array of {x: timestamp, y: value} objects
chart.data.datasets[0].data.push(
{
x: Date.now(),
y: result
});
})
}
}
},
y: {
type: 'linear',
min: 0,
max: 2100
}
},
plugins: {
zoom: {
// Assume x axis has the realtime scale
zoom: {
pinch: {
enabled: true // Enable pinch zooming
},
wheel: {
enabled: true // Enable wheel zooming
},
mode: 'x' // Allow zooming in the x direction
}
}
}
}
});
Source:stackexchange.com