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]

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.

Thanks @prakis 👍 .. I think that this is a great feature to be included in this plugin implementation

[prakis]

@Attrash-Islam updated the fork to support better onZoom call back which sends exact zoom-start-point, zoom-end-point and also send top,left plot margin values if at all needed for further calculations.

This is the latest onZoom call back signature

onZoom: function({chart}, actualStartPoint, actualEndPoint, margins)

https://github.com/prakis/chartjs-plugin-zoom/

I don't think I understood this. ActualStartPoint is the start drag timestamp point?

I don't see that this is the case in your implementation. Sending the x value for the start and the end can give us the chance to fetch data from point to point with better resolution from the server.

Can you explain in details about these Actual values?

Thanks a lot!

[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.

So great explanation! Will review the changes you done in detail soon.
Thanks a lot 👍