Cross hair customization


#1

I am an android developer,can any one help me in creating a crosshair with the values on the respective axis.

Thanks,

Anilk


#2

Hello Anilk,

Thanks for getting in touch. I am afraid I am not 100% clear on what type of crosshair you wish to achieve. Do you mean you wish to modify the text on the existing crosshair, or do you mean you wish to come up with an entirely new crosshair?

We do have some new functionality which is currently under development which will offer various customisation options for the crosshair. If you could be a little clearer in your description of what you wish to achieve I should be able to help you a little more.

I look forward to hearing from you.

Thanks,

Kai.


#3

Hi Kai,

Thanks for your response,actually i want to build a crosshair in which crosshair point value will be displayed on respective axis,such as value of x will be displayed on x axis and value of y on the y axis.
And as we move the crosshair values and the views holding the values will change there position and values accordingly.

Please help me in that.

Thanks,

Anilk


#4

Hello Anlik,

Thanks for the update and extra information.

ShinobiCharts for Android does not offer this type of functionality out of the box, but with a little work you should be able to achieve what you need.

Firstly, you would need to create 2 new views, adding them to your layout, similar to how you will have added the ChartFragment or ChartView. These 2 views will represent your ‘tooltip’ for your x and your y axes.

Now you will be faced with two tasks.

1 - To position the views appropriately.

2 - To place the appropriate text on to each view.

1 - To position the view appropriately you will need to react to a user gesture (for example a swipe, or a long press as the cross hair is shown by the user). To do this you will need to implement the ShinobiChart.OnCrosshairListener in your code.

http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.5.0/Premium/Normal/apidocs/docs/reference/com/shinobicontrols/charts/ShinobiChart.OnCrosshairListener.html

You should implement code in both of the methods within this interface. In each implementation you need to use the available information to position your views. The listener methods pass to you the ShinobiChart object. From this you can obtain the crosshair object, using the getCrosshair() method:

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

Once you have access to the crosshair you can obtain the information on which point is being focussed on by the crosshair. For example you can obtain the x and y pixel values (which the crosshair currently has focus on) relative to the ShinobiChart object:

http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.5.0/Premium/Normal/apidocs/docs/reference/com/shinobicontrols/charts/Crosshair.html#getPixelXValue()

http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.5.0/Premium/Normal/apidocs/docs/reference/com/shinobicontrols/charts/Crosshair.html#getPixelYValue()

You also can obtain, from the chart a Rect that describes the plot area bounds, relative to the containing ChartView and a Rect that describes the canvas bounds, relative to the containing ChartView.

http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.5.0/Premium/Normal/apidocs/docs/reference/com/shinobicontrols/charts/ShinobiChart.html#getPlotAreaRect()

http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.5.0/Premium/Normal/apidocs/docs/reference/com/shinobicontrols/charts/ShinobiChart.html#getCanvasRect()

2 - To populate the views accordingly, you can use the information available from the crosshair. For example, the crosshair object provides methods such as getUserXValue and getUserYValue, which provide the corresponding user values for the crosshair’s current position on the respective axis.

You will also need to hide the default tool tip. Currently we do not provide an option to do this but you could style it within the CrosshairStyle object to hide it, by using a transparent colours for example. 

http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.5.0/Premium/Normal/apidocs/docs/reference/com/shinobicontrols/charts/CrosshairStyle.html

Please note that currently under development are significant changes to the crosshair’s tooltip functionality. Subsequently some of the above mentioned methods may be deprecated. I can say however that in this case, the general technique  needed to achieve the various pieces of functionality will remain the same. 

I hope this helps, please let us know if you need any further help.

Thanks,

Kai.