SciChart Android 3D Charts API > Tutorials 3D > 3D Tutorial 06 - Cursors and Tooltips
3D Tutorial 06 - Cursors and Tooltips

In the previous tutorial, we showed how to create a chart and add data. In this tutorial we show how to add a cursor and tooltip to that chart.

Definitions

  • cursor ⁠— a tablet or cell phone obviously does not have a mouse. Instead the mouse is your finer and the cursor is where you place your finger. It appears as a small x (cross).
  • tooltip⁠ — is text that displays when you push the cursor onto an object, like a point plotted on a chart. You have to push the cursor onto the coordinate for the text to appear. In the case of the example below you probably need to use two fingers to zoom into the chart to make the points appear large enough to that you can see them.

Tooltip

At the bottom of CreateScatter3DChartFragment we added a ModifierGroup3D in the previous tutorial. This gives the chart the panning and zooming ability.

Example Title
Copy Code
surface3d.getChartModifiers().add(sciChart3DBuilder.newModifierGroupWithDefaultModifiers().build());

We can add more additional charts on the surface by simple adding them to surface3d.getRenderableSeries().add(CHART). Similarly we an add additional modifiers, such as a TooltipModifier, to the surface3D object using surface3d.getChartModifiers().add.

So in CreateScatter3DChartFragment we create a TooltipModifier3D.

Example Title
Copy Code
final TooltipModifier3D tooltipModifier3D = new TooltipModifier3D();
        tooltipModifier3D.setIsEnabled(true);
        //tooltipModifier3D.setExecuteOnPointerCount(1);
        tooltipModifier3D.setCrosshairMode(CrosshairMode.Lines);
        surface3d.getChartModifiers().add(new ModifierGroup3D(tooltipModifier3D));

Then we assign the CustomXyzSeriesTooltip3D, defined further below in the class CustomSeriesInfo3DProvider, with return new CustomXyzSeriesTooltip3D(context, seriesInfo) to the CustomSeriesInfo3DProvider.

Example Title
Copy Code
class CustomSeriesInfo3DProvider extends DefaultXyzSeriesInfo3DProvider {
    @Override
    protected ISeriesTooltip3D getSeriesTooltipInternal(Context context, XyzSeriesInfo3D<? extends XyzRenderableSeries3DBase> seriesInfo, Class<?> modifierType) {
        if(modifierType == TooltipModifier3D.class) {
            return new CustomXyzSeriesTooltip3D(context, seriesInfo);
        } else {
            return super.getSeriesTooltipInternal(context, seriesInfo, modifierType);
        }
    }

We define the behavior of the tooltip by extending XyzSeriesTooltip3D. Here we add the text that we want to appear in the tooltip. In this case we pass it a description and the x,y,z coordinates or the point you touch. Use a line feed \n at the end of each line.

Example Title
Copy Code
class CustomSeriesInfo3DProvider extends DefaultXyzSeriesInfo3DProvider {
    @Override
    protected ISeriesTooltip3D getSeriesTooltipInternal(Context context, XyzSeriesInfo3D<? extends XyzRenderableSeries3DBase> seriesInfo, Class<?> modifierType) {
        if(modifierType == TooltipModifier3D.class) {
            return new CustomXyzSeriesTooltip3D(context, seriesInfo);
        } else {
            return super.getSeriesTooltipInternal(context, seriesInfo, modifierType);
        }
    }
    private static class CustomXyzSeriesTooltip3D extends XyzSeriesTooltip3D {
        public CustomXyzSeriesTooltip3D(Context context, XyzSeriesInfo3D<?> seriesInfo) {
            super(context, seriesInfo);
        }
        @Override
        protected void internalUpdate(XyzSeriesInfo3D<?> seriesInfo) {
            final SpannableStringBuilder sb = new SpannableStringBuilder();
            sb.append("This is Custom Tooltip").append("\n");
            sb.append("VertexId: ").append(Integer.toString(seriesInfo.vertexId)).append("\n");
            sb.append("X: ").append(seriesInfo.getFormattedXValue()).append("\n");
            sb.append("Y: ").append(seriesInfo.getFormattedYValue()).append("\n");
            sb.append("Z: ").append(seriesInfo.getFormattedZValue());
            setText(sb);
            setSeriesColor(seriesInfo.seriesColor);
        }
    }
}

Here is the result:

 

See Also