I'm using react-chart-2
with chartjs-plugin-zoom
and chartjs-plugin-streaming
plugins. Now I'm showing the last 20 data points in the chart. I want to modify this to pannable
chart.
const [sensorReadings, setSensorReadings] = useState();
useEffect(()=>{
// code for fetch initial readings from back end
},[]);
datasets: [
{
backgroundColor: colors.indigo[500],
data: sensorReadings.map(reading => ({ x: reading.time, y: reading.value })),
label: 'This year',
fill: false
}
]
This is my datasets object. Here the sensor readings object will have last 20 readings. When a user scrolls the charts (scrolls to the older date), I want to trigger a function say fetchRest()
, that will fetch the next 20 readings and update the state. My question is how to trigger that fetchRest
, when a user scrolls?
Edited
This is similar to blog post page, where at the beginning we display only certain amount of posts and when the user reaches the bottom of the page, we fetch next set of posts and display them.
The chartjs-plugin-zoom provide an event listeners for user "onPan"
interaction. You can access them here https://www.chartjs.org/chartjs-plugin-zoom/guide/options.html#pan-events
So the ideas is to call fetchRest() on user pan, so you can attach your function call, in the event listener, like :
pan: {
onPan: function(chart){
fetchRest() //fetch call
}
},
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.