Hello,
We have a heatmap where we can zoom in using the MouseWheelZoomModifier. Essentially we want to stop zooming at a certain visibleRange level and we cannot achieve it. Currently we have a heatmap that’s about 1500 pixels in width (with 1500 datapoints, 1-to-1), but the user can zoom so far you essentially see just 1 data point spread over the 1500 pixels.
We want to be able to zoom, but up to a certain limit, let’s say 100 datapoints visible. When visibleRange.max – visibleRange.min <= 100 we want to stop zooming.
We’ve tried suspendUpdates() and manually setting the visibleRange, but this doesn’t produce the desired results because suspendUpdates stops everything (including zooming out again) and resetting visibleRange solves it for a second, but the user is able to zoom in again. We also tried a custom mouseWheelModifier class and just removing the zoom in functionality at the treshold but that does not seem to work because scichart gives an error of having different mouseWheelModifiers.
I hope that this problem was expressed sufficiently. Please let us know if you have any questions.
- Zino As asked 1 year ago
- You must login to post comments
Hi Zino
This is actually quite simple, take a look at the documentation page Listen to Visible Range Changes.
There’s a good live sample on that page and a codepen that you can experiment with.
Here’s how to listen to visiblerange changes:
// subscribe to visibleRangeChanged on yAxis
sciChartSurface.yAxes.get(0).visibleRangeChanged.subscribe((args) => {
const message = `yAxis range: ${args.visibleRange.min.toFixed(2)}, ${args.visibleRange.max.toFixed(2)}`;
console.log(message);
});
Using this, you can limit the axis range, or clamp the visiblerange to prevent zooming in or out beyond a certain value. Try something like this
axis.visibleRangeChanged.subscribe((args) => {
if ((args.visibleRange.max - args.visibleRange.min) < X) // Constrain max-min to X here
axis.visibleRange = new NumberRange(min, max); // calculate what min, max you want here
});
Best regards
Andrew
- Andrew Burnett-Thompson answered 1 year ago
- last edited 1 year ago
- You must login to post comments
Hi Andrew,
We’re aware of subscribing to visibleRangeChange, we implement it in a slightly different way.
xAxis.visibleRangeChanged.subscribe(async (args) => {
subject.next(args.visibleRange);
});
subject.pipe(debounceTime(600)).subscribe((r: NumberRange) => {
// Fetch data and update the dataSeries
if (
props?.handleRangeChange !== undefined
)
handleRangeChangeWrapper(r);
});
We use a debounce time because upon zooming in we fetch new, more detailed data.
The solution you suggest works in a sense, however it still allows the user to zoom in too far, and then simply “pushing” it back to 100. We would ideally like a hard limit. I will try implementing something like this in the subject.pipe.
- Zino As answered 1 year ago
Well, if you didn’t have the debounce then it would work exactly as you require. Perhaps implement your range clipping logic before subject.next() ?
- You must login to post comments
Please login first to submit.
