Chart Annotation and gridlines in Android


#1

Hi guys,

I try to have an AnnotationBand overlay over my chart.
We have the premium subscription and, thus, can use the AnnotationManager.
So far I have found all the necessary documentation to create my chart with grid lines on.

Problems:
1.) At first it shows me the regular chart with my grid and data line correct BUT no annotations (default background color and visible grid).

2.) As soon as I touch the chart and try to move it around, suddenly the annotations appear BUT then they overlay completely with the chart and the grid completely disappears. I can put them behind the data with the position attribute = BEHIND_DATA but not behind the grid.

I found the following post: https://forum.shinobicontrols.com/t/chart-grid-lines/522/12 where a similar problem is described and you stated it is not possible to do that at the moment (it’s from July '16 though). Does it still apply or how am I able to show an annotation band behind data AND behind the grid?

Thank you so much,
Christian

The relevant code snippet out of onViewCreated function:

val shinobiChart = chart.shinobiChart
val annotationsManager = shinobiChart.annotationsManager

// Create the X axis
val xAxis = DateTimeAxis()
xAxis.style.lineWidth = 0f
xAxis.style.tickStyle.setLabelsShown(true)
xAxis.style.tickStyle.setMajorTicksShown(true)
xAxis.style.tickStyle.lineLength = 8f
xAxis.style.tickStyle.lineWidth = 1.5f
xAxis.style.tickStyle.labelTextSize = 10f
xAxis.style.gridlineStyle.lineWidth = 1f
xAxis.style.gridlineStyle.lineColor = Color.parseColor("#80FAFAFA")
xAxis.enableGestureZooming(false)
xAxis.enableGesturePanning(true)

xAxis.labelFormat = SimpleDateFormat("hh:mm")
xAxis.majorTickFrequency = DateFrequency(7, DateFrequency.Denomination.MINUTES)
xAxis.enableGestureZooming(false)
xAxis.enableGesturePanning(true)
xAxis.allowPanningOutOfMaxRange(true)

// Create the Y axis with a default range
val yAxis = NumberAxis()
yAxis.position = Axis.Position.REVERSE
yAxis.style.tickStyle.setLabelsShown(true)
yAxis.style.tickStyle.setMajorTicksShown(false)
yAxis.style.tickStyle.setMinorTicksShown(false)
yAxis.style.tickStyle.labelTextSize = 10f
yAxis.style.gridlineStyle.lineColor = Color.parseColor("#80FAFAFA")

val dryBand = annotationsManager.addHorizontalBandAnnotation(
        NumberRange(0.0, 40.0), xAxis, yAxis)
dryBand.style.backgroundColor = Color.parseColor("#FDE458")
dryBand.position = Annotation.Position.BEHIND_DATA

val comfortableBand = annotationsManager.addHorizontalBandAnnotation(
        NumberRange(40.0, 60.0), xAxis, yAxis)
comfortableBand.style.backgroundColor = Color.parseColor("#AFD854")
comfortableBand.position = Annotation.Position.BEHIND_DATA

val humidBand = annotationsManager.addHorizontalBandAnnotation(
        NumberRange(60.0, 100.0), xAxis, yAxis)
humidBand.style.backgroundColor = Color.parseColor("#7DB4D1")
humidBand.position = Annotation.Position.BEHIND_DATA

shinobiChart.xAxis = xAxis
shinobiChart.yAxis = yAxis

// Populate the data adapters with data points of the sine and cosine waves
val dataAdapter = SimpleDataAdapter<Date, Double>()
val series1 = LineSeries()
series1.dataAdapter = dataAdapter
shinobiChart.addSeries(series1)

val style1 = series1.style
style1.lineColor = Color.argb(255, 113, 191, 69)
style1.lineWidth = 3f

// Redraw the chart to apply the style changes
shinobiChart.redrawChart()

#2

Hi Christian.
Currently shinobicharts for Android does not offer the ability to place Annotations behind the grid lines. Unfortunately this is not a feature that we have been asked for often.
I would suggest if your use case allows that you experiment with grid line styles in conjunction
with applying an alpha value to your annotations. Alternatively you could use the approach outlined in the post which you have linked to: adding an additional View over the top of your chart and drawing your grid lines directly onto the associated Canvas.
We apologise for not currently offering this feature but we do hope this information helps you.
I would like to touch upon the other issue which you mention. When you add an annotation to your chart, it should be visible immediately and certainly not require a touch gesture in order for it to be visible. Is it possible for you to send us a cut down working sample which demonstrates this issue? If so please get in touch at info@shinobicontrols.com.
Thanks,
Kai.


#3

Hi Kai,

Thanks for the reply. It’s inconvenient b/c I thought it would be possible as I’ve seen it implemented in that way on an iOS device. My workaround also was to try out a 50% alpha reduction.

The second part was just my mistake (annotations drawn at the wrong point).

Thanks for the help!
Cheers,
Christian


#4

Hi Christian,
Thanks for getting back to me. I’m glad you were able to resolve the issue albeit not ideally. Please let us know if you need anything else.
Yours,
Kai.