thumbnail

Back to Blog

ShinobiCharts for Android v1.5 has arrived!

Posted on 11 Jun 2014 Written by Patrick Armstrong

The latest version of ShinobiCharts for Android has just been released and includes lots of features requested by you, our amazing users, bringing us ever-closer to parity with our iOS counterpart.

Here’s what’s in:

  • Advanced tick mark customization – multi-line tick mark labels, custom major tick values and individual tick mark customizations
  • Custom baselines – line, column and bar series can now have a non-zero baseline
  • Double tap gesture – configurable to either zoom in or reset the visible range
  • Crosshair behavior – configurable series tracking, out of range and line drawing behavior, as well as the option to switch off interpolation for line series
  • Range padding – add a bit of room either side of the data on your axes

And hot on its heels, we’ll be releasing v1.5.1 in a couple of weeks time which will throw advanced customization of the crosshair and tooltip into the mix!

Read on for some top tips and further details on these new features.

annotated_screenshot.png

The above chart is taken from a sample project we put together to show off some of these new features. You can browse the code on GitHub, or download it as a zip. You’ll also need a copy of ShinobiCharts for Android to build it – if you don’t have one you can download a free trial. And if you’re new to ShinobiCharts for Android, you might find it useful to take a look at the Quick Start Guide before reading on.

We’ve also put together a project for Xamarin.Android users – GitHub or zip download. You’ll need to set a reference the ShinobiCharts .dll file in the download bundle and also add the V4 Support Library from the Xamarin Component Store.

TickMark Customization

In v1.4 we introduced the ability to individually customize pie slice labels. This time it’s the turn of tick marks! In the chart above we’re making use of all three tick mark customization options we’ve introduced.

The column series is associated with the Y axis on the right (Units). We want to display the column series below the line series and as such don’t want the tick marks on that axis going all the way up to the top of the chart. To achieve this, we’ve given the axis a set of major tick mark values like so:

List<Double> tickMarkValues = new ArrayList<Double>();
tickMarkValues.add(Double.valueOf(0.0));
tickMarkValues.add(Double.valueOf(5.0));
tickMarkValues.add(Double.valueOf(10.0));
axis.setMajorTickMarkValues(tickMarkValues);

These are now the only tick mark values the axis will display, regardless of whether the chart is zoomed in or out.

For the X axis, we want to change the tick mark label for the current month to say This Month (but over two lines). For each month after we want to append the word Forecast to the label and color it gray. To do this we use the new ShinobiChart.OnTickMarkUpdateListener callback interface. We simply make our Activity implement the interface and override the onUpdateTickMark method as follows:

@Override
public void onUpdateTickMark(TickMark tickMark, Axis<?, ?> axis) {

    if (axis.getOrientation() == Axis.Orientation.HORIZONTAL) {

        if (isCurrentMonth(tickMark.getLabelText())) {
            tickMark.setLabelText("This\nMonth");
        }
        else if (isFutureMonth(tickMark.getLabelText())) {
            tickMark.setLabelText(tickMark.getLabelText() + "\nForecast");
            tickMark.getLabelPaint().setColor(getResources().getColor(R.color.my_grey));
        }
    }
}

and set the Activity as the listener on the chart in the onCreate method:

chart.setOnTickMarkUpdateListener(this);

Without doing anything further, you’ll find that the tick mark labels will be cut off by the bottom of the screen. We need to tell the axis that the expected longest label is over two lines so that it leaves enough room for the label. To do this we call axis.setExpectedLongestLabel("Forecast\nForecast"); (notice the new line character \n in the middle of the String).

Custom Baselines

On our chart we have a line series and column series. We want to show their data relative to a target value; any values above the target are colored green and any below are colored red.

By default bar and column series have a baseline of 0. Line series take their default from the minimum of the default range of the relevant axis they’re associated with. If there isn’t a default range set then it will consider the data range, range padding and any other series on the same axis with a custom baseline.

To explicitly set a baseline all you have to do is call the setBaseline(Object) method on the series. It takes an Object as the series could be associated with any type of axis (and this can change at runtime). For the line series in our chart we simply call series.setBaseline(75); and for the column series we call series.setBaseline(7.5);. If you want to get the baseline from a series it will be necessary to cast it to a suitable type before using it.

We can then style both the series such that data points above their baseline are colored green and below are colored red, for example:

LineSeries series = new LineSeries();
...
series.getStyle().setLineColor(getResources().getColor(R.color.my_green));
series.getStyle().setLineColorBelowBaseline(getResources().getColor(R.color.my_red));

Range Padding

The X axis on our chart has a little room either side of the data – this is called range padding and can be set as follows:

axis.setRangePaddingHigh(0.5);
axis.setRangePaddingLow(0.5);

For a NumberAxis and a CategoryAxis these methods take a Double. For a DateTimeAxis, they take a java.util.Date. Note, CategoryAxis extends NumberAxis with each category mapping to 0.0, 1.0, 2.0 and so on. Therefore, you are able to specify fractional padding values, just as we have done above.

Double Tap Gesture

One new feature not demonstrated by the above chart is support for double tap gestures. When an axis has panning and zooming enabled, a double tap gesture by default will zoom the displayed range in by 50%. It can instead be configured to reset the displayed range to the default range of the axis. This is simply done as follows:

axis.setDoubleTapBehavior(DoubleTapBehavior.RESET_TO_DEFAULT_RANGE);

The double tap gesture can be turned off altogether for an axis by calling:

axis.enableDoubleTap(false);

Crosshair Behavior

Another new feature we’ve added that isn’t demonstrated by the above chart is the ability to configure various aspects of the crosshair’s behavior.

The mode can be set to make the crosshair track the series it was activated on when it’s moved, or to float between the series on the chart, depending on the nearest data point. For example:

chart.getCrosshair().setMode(Crosshair.Mode.FLOATING);

The out of range behavior determines what happens to the crosshair when it is moved outside the visible range (for example, if you zoom in and the crosshair is pushed off-screen). It can hide itself but remain active, it can leave its tooltip at the edge of the plot area or it can be removed altogether. For example:

chart.getCrosshair().setOutOfRangeBehavior(Crosshair.OutOfRangeBehavior.KEEP_AT_EDGE);

By default, the crosshair lines are drawn for a line series but not for any other series but now all series types can have the crosshair lines drawn for them if desired. This can be done as follows:

chart.getCrosshair().setDrawLinesBehavior(Crosshair.DrawLinesBehavior.ALWAYS);

Also by default, when tracking a line series, the crosshair will interpolate between data points. This behavior can now be turned off making the crosshair jump from point to point in the same way it does for the other series types. This is done by calling the following:

chart.getCrosshair().setLineSeriesInterpolationEnabled(false);

Try It Out Yourself

So now you know what’s in there, why not download a free 30 day trial? To see a full list of what’s new take a look at the included ChangeLog and don’t forget to check out the samples and user guide.

Have fun!

Back to Blog