I am trying to implement the following functionality requested by our users:
Zoom:
– Only zoom the chart when using CTRL + MouseWheel key
– This is similar to how most browsers behave
Pan/Scroll:
– If no CTRL key is pressed, then pan/scroll
– This is similar to how most browsers behave
Given the above requirement, I started by creating custom modifier by extending YAxisDragModifier.
My code almost works:
– When using CTRL + Mouse Left & Drag, it Scales (zooms) — just like the user wants
– But using CTRL + Mouse Wheel does not do the same — it only Scales (Zooms).
I have uploaded the code at codesandbox.io:
https://codesandbox.io/s/amazing-shape-2ispt0?file=/src/customModifiers.ts
Note that I have not tried to implement this in ZoomPanModifier yet, but would be helpful if you could give me some pointers on getting this feature in there too.
I would appreciate any help I can get and thanks a bunch in advance.
Best Regards,
Sachin Patel.
- sachin patel asked 2 years ago
- last active 2 years ago
Hello, I have added YAxisDragModifier and ZoomPanModifier to my surface and when I try to drag on Y axis I can move the X axis too and that is not the behavior that I was trying to get. I want when I drag/move YAxis not to move on the YAxis also.
Here is my code:
Surface.ChartModifiers.Add(new PinchZoomModifier());
Surface.ChartModifiers.Add(new ZoomExtentsModifier());
Surface.ChartModifiers.Add(new YAxisDragModifier { DragMode = AxisDragModifierBase.AxisDragMode.Pan });
Surface.ChartModifiers.Add(new XAxisDragModifier { DragMode = AxisDragModifierBase.AxisDragMode.Pan, ClipModeX = ClipMode.None });
Surface.ChartModifiers.Add(new ZoomPanModifier
{
Direction = Direction2D.XDirection,
ZoomExtentsY = false
});
Here is the video with the behavior:
VIDEO: https://drive.google.com/file/d/1kbYi2voKNvHD5J7D6-XDw7OJx4IwlEqr/view
Help please!
- Ilija Kocev asked 6 years ago
- last active 6 years ago
Hi I am implementing a chart on Android with 24 Hours of data viewable in 1, 2, 4, 8, 12 and 24 hours windows. The chart is drag-able upon the xAxis only. The full extent of the yAxis is always visible.
I am struggling to control the rate of scroll compared to the drag speed. What is desired is always a perceived one to one ratio of movement. This means that a data point’s movement distance when scrolled is the same is the point of touch’s movement distance regardless of zoom level.
I am currently using:
ChartModifierCollection surfaceChartModifiers = surface.getChartModifiers();
XAxisDragModifier dragModifier = new XAxisDragModifier();
dragModifier.setDragMode(AxisDragModifierBase.AxisDragMode.Pan);
dragModifier.setClipModeX(ClipMode.ClipAtExtents);
surfaceChartModifiers.add(dragModifier);
ZoomPanModifier zoomPanModifier = new ZoomPanModifier();
zoomPanModifier.setClipModeX(ClipMode.ClipAtExtents);
zoomPanModifier.setDirection(Direction2D.XDirection);
zoomPanModifier.setZoomExtentsY(false);
surfaceChartModifiers.add(zoomPanModifier);
Currently however the ratio does not appear to be one to one the scrolling move further than the touch drag distance.
How can I achieve this?
- Simon Barnes asked 6 years ago
- last active 6 years ago
