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.
- Ivan Schütz asked 7 years ago
-
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)?
-
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).
-
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 login to post comments
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
- Yura Khariton answered 7 years ago
- last edited 7 years ago
-
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 login to post comments
Please login first to submit.