"Zoom" action shouldn't escape the "Pan" range bounds

I’m currently working to implement a chart with chartjs-plugin-streaming and chartjs-plugin-zoom to show real time data from a remote source, but I’m having a few issues with the zoom and pan side of my chart…

I’ve created a JSFiddle inspired by the chart inside my app, showing the behaviour I’m having trouble with. to summarise the configuration:

• my app has a buffer with 5 minutes’ worth of data
• this is shown in datasets linked to the realtime X-axis provided by the streaming plugin
• I have the zoom plugin’s pan.rangeMin set to 0 and pan.rangeMax set to 5 * 60 * 1000 (matching the buffer duration)
• I’m only using pan and zoom on the X-axis, with Y-axis scaling controlled automatically by Chart.js

when I zoom my chart out, the chart zooms central to the point it was zoomed from (as expected), but if either the left or right bound of the “zoom” range extends past the bounds of the “pan” range, the chart retains that visible range.

at the point, trying to pan either left or right, only then is the pan location updated to fall within it’s defined bounds.

I feel like this is an issue in the zooming plugin though, because I would expect the “zoom” action to stay within the “pan” bounds of the chart.

[benmccann]

Can you set zoom.rangeMin = pan.rangeMin and zoom.rangeMax = pan.rangeMax?

You chart sounds cool! I’d love to see it if it’s publicly available to share!

[ZaLiTHkA]

so, [looks at the date] I finally got a chance to get back to this… anyways, I got my desired behaviour working, my solution is two-fold:

1. I’m updating the pan “rangeMax” dynamically based on current chart data, in such a way that it prevents the “pan” action from moving past either end of the currently rendered chart data.
2. on panning or zooming, I clamp the chart’s “delay” value between 0 and a “sensible max delay” that I’m recalculating based on currently rendered chart data.

I implemented this in my hybrid mobile project and it’s working pretty damn well, so I’ve updated my original JSFiddle example to share it back here again. 😃

edit: found a small issue with panning/zooming a paused streaming chart, so I tweaked it a bit more, so now the duration calculations are based entirely on chart data, not “now vs earliest data timestamp”… my chart data source pauses when I pause the chart, so this tweak may be pretty specific.