Column labels on multiple series - Android help


#1

I have the follow bar column chart with 2 series. The design is supposed to include the actual y-axis value on the column itself, however it doesn’t appear that there is no data point label functionality implemented yet in the Android library. I attempted to handle this using annotations, but since I have two series with identical x-values, the annotations are appearing over both columns.

Is there a way to obtain the drawn area of an individual data point’s column so that I can center these annotations? Is there a better way to get around the missing label functionality that I’m not seeing?

Any help on this would be greatly appreciated.

Bar chart annotations


#2

Hi scarrell,

I can confirm that ShinobiCharts for Android doesn’t yet include the data point label functionality that our sister iOS version has. There also isn’t a direct way of obtaining the area taken up by the columns.

That said, if your chart is static (or at least doesn’t allow zooming) you can work out the column width as follows:

  • divide the current displayed width of the x axis by the number of columns - this will be the width (in datat terms) of each column if there was no interSeriesPadding and no interSeriesSetPadding
  • in your picture above it looks like you have 0 interSeriesPadding but 0.5 interSeriesSetPadding in which case you will want to multiply the above column width by 1 - 0.5 to get the actual column width
  • that value divided by 2 will be the offset in data terms for your annotations but you’ll need to convert it to pixels: use the Axis.getPixelValueForUserValue() method to convert the half column width value to pixels, the minimum of the displayed range to pixels and finally the difference between the half column pixel value and the range minimum pixel value

In order for the getPixelValueForUserValue() method to return meaningful answers the chart needs to be laid out. As such we provide the ShinobiChart.OnInternalLayoutListener callback interface. So, if you add your annotations at the data points just as you have been doing and then in the onInternalLayout callback method calculate the offset you can adjust the position of the annotations by that offset

e.g. 
Annotation annotation = chart.getAnnotationsManager().getAnnotations().get(0);
a1.getView().offsetLeftAndRight(-offset);

This should work fine when panning the chart. However, zooming the chart will change the width of the columns and so you may be able to hook into some of the other callback interfaces to calculate an amount to ‘zoom’ the width by (e.g. OnGestureListener.onPinch or even OnAxisRangeChangeListener).

Hope that helps! I know it sounds quite fiddly but, particularly if you’re not zooming, it’s actually pretty straight forward and doesn’t require much extra code.

Patrick


#3

Does Android still not have the data point label functionality that iOS has?