Dynamic data zoom

Hi maintainers 🙂

Can I stop the zoom from happening and get the time axis for the dragged selection and do the zoom myself?

I saw that feature in other libraries and it’s really good since I can get the data from startTime to endTime with higher resolution as I need without just regular scaling.

Some libraries implemented this by returning false in the onZoom callback.

[prakis]

My requirement is similar when user tries to zoom an area, we want to call server to fetch new data in the zoomed rectangle area.

When user tries to zoom, the mouse down point is ActualStartPoint. User drag and leave (mouse up), this is ActualEndPoint. (Let me know if the variable names are misleading and you have better suggestion).

Using ActualStartPoint and ActualEndPoint I will match the corresponding datapoints(timestamp in your case). We can return the datapoints(timestamps) directly instead of drag x,y values but this fails in cases where we may not have datapoints(timestamp) at the exact zoom mouse points. In our case we need to calculated with special cases. Sending the datapoints(timestamps) will do too much abstraction, we need more control on how the x,y to actual datapoints are calculated.

ActualStartPoint and ActualEndPoint already subtract the margin offset(left for labels, legend). I am passing ‘margins’ parameter to onZoom() for any special cases where they need do some calculations.

Let me know if this helped you to understand.

[prakis]

I couldn’t find anyway to get the drag events so I forked and made those changes temporarily. It is not very well tested.

Until you find a official support for this you can use my fork, which does exactly that. https://github.com/prakis/chartjs-plugin-zoom

Please note In couple of days I will be making some minor modifications to support the direction properties. This is needed if you want to do custom Pan along with Zoom.