Tooltip Arrow


#1

This may be outside the scope of this forum, but I was wondering if anyone has successfully added a tooltip arrow to the chart tooltip in Android?  I have my tooltip adjusted to be next to the point that is clicked, but I would like an arrow pointing to the selected chart point.

I’ve tried adding an arrow image to my tooltip layout and also tried adding the arrow image programmatically, both with no success.


#2

Hello.

It should be possible to have your tooltip ‘pointing’ at your data point. To achieve this a number of steps would be required. 

Firstly, I’d start by replacing the standard tool tip with a custom one, with a View which you provide. You could start by using a simple TextView. You could use these methods to help with this:

https://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.8.2/Premium/Normal/apidocs/reference/com/shinobicontrols/charts/ShinobiChart.html#getCrosshair()

https://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.8.2/Premium/Normal/apidocs/reference/com/shinobicontrols/charts/Crosshair.html#getTooltip()

https://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.8.2/Premium/Normal/apidocs/reference/com/shinobicontrols/charts/Tooltip.html#setView(android.view.View)

You could then create a custom view which would have the arrow. Of course, a View typically is square or rectangular in shape, with more complex shapes being possible by parts of the view being invisible, by means of transparent pixels. You could replace your previous TextView with your new arrow view. I would expect the arrow point to be right up to one edge of your view. For example an arrow pointing down would have it’s tip at the same vertical position as the view’s bottom.

You could make the ‘arrow’ ‘point’ at the chosen data point simply repositioning the centre point of your tool tip. So for example if you wanted the tooltip to be above the data point, with the arrow pointing downward, you would need the centre point of the tooltip to move upward by a number of pixels which represent half of the total height of the View. 

This can be achieved by implementing the following listener to intercept the chain of events before the tool tip is drawn:

https://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.8.2/Premium/Normal/apidocs/reference/com/shinobicontrols/charts/ShinobiChart.OnTrackingInfoChangedForTooltipListener.html

As you can see, you are given the dataPointPosition, which represents in data terms the visual position of the data point closest to the user gesture. The axis offers a convenience method which should help you covert from data values to pixel values:

https://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.8.2/Premium/Normal/apidocs/reference/com/shinobicontrols/charts/Axis.html#getPixelValueForUserValue(T)

Once you have this pixel value, you should be able to apply a suitable offset, to adjust the centre position of your tooltip. 

You can then transform this new value back to data terms, using this method:

https://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.8.2/Premium/Normal/apidocs/reference/com/shinobicontrols/charts/Axis.html#getUserValueForPixelValue(float)

Finally, you can apply this new value to your tool tip:

https://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.8.2/Premium/Normal/apidocs/reference/com/shinobicontrols/charts/Tooltip.html#setCenter(com.shinobicontrols.charts.Data<?,%20?>)

I hope this helps,

Thanks,

Kai.