Pre loader

Show a marker with tap and disable zoom/pan?

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0
0

I was wondering about the possibilities to show markers. I dug a while in the examples and played with default interactions, which use dragging to update the position of the marker.

On mobile devices this conflicts a little with the pan interaction to move the chart. I saw there’s also the possibility to pan using the axes area. There’s also the possibility to just tap on the chart, which doesn’t conflict with other interactions, to show a marker, but I couldn’t find how to do this. At least there doesn’t seem to be built in support for it? How should this be done?

Additionally I would like once a marker appears to either be able to update only by tapping again at other place on the chart (simple solution) or temporarily disabling the panning such that this gesture only moves the marker and not the chart (preferred, but probably less simple solution). So tapping on the chart would enter “marker mode” which disables zooming and panning and some other gesture – e.g. using an external button on the chart, would leave “marker mode” and enter zoom/pan mode again.

Any ideas how to achieve this? Thanks in advance!

P.S. I’m also using a real time chart, though this probably doesn’t make a difference concerning this.

Version
6.0.1
  • Yura Khariton
    Hi Ivan. Can you clarify what do you mean by ‘marker’? Is it one of our modifiers(CursorModifier/RolloverModifier) or it is an annotation (BoxAnnotation, CustomAnnotation)?
  • Ivan Schütz
    Hi Yura, I just mean a small tooltip showing the value of the point(s) (preferably customizable, e.g. to show x/y with formatted date but this isn’t really necessary), similar to the ones shown in the examples e.g. with withTooltipModifier() or withPinchZoomModifier(). But I want to only tap somewhere and then the tooltip shows above the nearest point at that location and also keeps attached to it (in real time chart case, the tooltip would then keep moving automatically to the left with the chart).
  • Ivan Schütz
    Related: How do I show the tooltips of roll over modifier only on long press? Not being able to find anything about this either in internet or what I can see from the source… The problem is that my chart is scrollable (and real time) and it’s not good UX when the tooltips appear during panning as seeing the tooltips is not the intention of the user at this moment and also the panning still is consuming the move events. I noticed that after long touch the behaviour changes, and the tooltips start consuming the event, which is good, but I need to also start showing the tooltips only at this point, not before.
  • You must to post comments
0
0

Hi Ivan,

Unfortunately we don’t support such behavior out of the box for now, but I think you can implement desired behavior in custom modifier:

public static class CustomTooltipModifier extends TooltipModifierBase {

    private double xTouchValue, yTouchValue;
    private final PointF point = new PointF();

    public CustomTooltipModifier() {
        super(new TooltipBehavior<>(CustomTooltipModifier.class, R.layout.scichart_default_tooltip_modifier_tooltip_container));
    }

    @Override
    protected void handleMasterTouchDownEvent(PointF point) {
        super.handleMasterTouchDownEvent(point);

        this.xTouchValue = getXAxis().getCurrentCoordinateCalculator().getDataValue(point.x);
        this.yTouchValue = getYAxis().getCurrentCoordinateCalculator().getDataValue(point.y);
    }

    @Override
    protected void handleMasterTouchMoveEvent(PointF point) {
        super.handleMasterTouchMoveEvent(point);

        this.xTouchValue = getXAxis().getCurrentCoordinateCalculator().getDataValue(point.x);
        this.yTouchValue = getYAxis().getCurrentCoordinateCalculator().getDataValue(point.y);
    }

    @Override
    protected void handleMasterTouchUpEvent(PointF point) {
        // don't hide tooltip on touch up event
        // super.handleMasterTouchUpEvent(point);
    }

    @Override
    public void onRenderSurfaceRendered(RenderedMessage message) {
        super.onRenderSurfaceRendered(message);

        // update position of tooltip when chart is drawn
        this.point.x = getXAxis().getCurrentCoordinateCalculator().getCoordinate(xTouchValue);
        this.point.y = getYAxis().getCurrentCoordinateCalculator().getCoordinate(yTouchValue);

        super.handleMasterTouchMoveEvent(this.point);
    }
}

You can customize by overriding SeriesInfoProvider for series which you use. You can find a forum post which shows how to do this here

Regarding your question about rollover modifier – you need to enable/disable rollover/pan modifier to prevent their overlapping. For example you can do this by creating custom modifier which will enable rollover on long press and disable it on scroll/fling:

public class CustomGestureModifier extends GestureModifierBase {
        private final RolloverModifier rolloverModifier;
        private final ZoomPanModifier zoomPanModifier;

        public CustomGestureModifier(RolloverModifier rolloverModifier, ZoomPanModifier zoomPanModifier) {
            this.rolloverModifier = rolloverModifier;
            this.zoomPanModifier = zoomPanModifier;

            // disable cursor by default
            rolloverModifier.setIsEnabled(false);
            zoomPanModifier.setIsEnabled(true);
        }

        @Override
        public void onLongPress(MotionEvent e) {
            super.onLongPress(e);

            // enable rollover after long press
            rolloverModifier.setIsEnabled(true);
            zoomPanModifier.setIsEnabled(false);
        }


        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
            // disable rollover on scroll
            rolloverModifier.setIsEnabled(false);
            zoomPanModifier.setIsEnabled(true);

            return true;
        }

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            // disable rollover on fling
            rolloverModifier.setIsEnabled(false);
            zoomPanModifier.setIsEnabled(true);

            return true;
        }
    }

You just need to create and add it into the chart:

final RolloverModifier rolloverModifier = new RolloverModifier();
final ZoomPanModifier zoomPanModifier = new ZoomPanModifier();
final CustomGestureModifier customGestureModifier = new CustomGestureModifier(rolloverModifier, zoomPanModifier);
Collections.addAll(surface.getChartModifiers(), rolloverModifier, zoomPanModifier, customGestureModifier);

Hope this will help you!

Best regards,
Yura

  • Ivan Schütz
    Thanks! It works (almost)! I think I’ll keep the rollover/custom modifier for now. The only thing which is not working well is that on the first scroll after showing the tooltips it will briefly show the tooltips again… seems a timing issue, probably when onScroll is called, rollover modifier, which is enabled at that point, starts showing and it takes a moment until onScroll has an effect…
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies