thumbnail2

Back to Blog

ShinobiCharts for Android – have fun with Pie Slice labels

Posted on 7 May 2014 Written by Kai Armer

For some time, ShinobiCharts for Android has offered some subtle styling options for Pie Charts, such as label text size, font and color. You developers out there are a hungry bunch – hungry for ways to be creative and here at Shinobi HQ, we aim to please. Many of you have asked for ways to make pie slice labels stand out – in this post I’ll be covering just that!

Let’s take a quick look at the before and after screen shots to illustrate what we are going to do:

Before After

As you work through the tutorial you might want to take a look at our sample project: you can browse the code on GitHub, or download the zip. You’ll also need a copy of our Android Charts to follow the tutorial – if you don’t have one, then download a trial version. 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.

Grab a slice

In order to style up our slice labels, we first need to grab a reference to the slice itself. This can easily be done by implementing the OnPieDonutSliceUpdateListener interface:

public class ProtrudeAxisLabelListener implements OnPieDonutSliceUpdateListener {

    @Override
    public void onUpdateSlice(PieDonutSlice slice, PieDonutSeries<?> series) {...
    }
}

As you can see, the onUpdateSlice method passes back a reference to the pie slice and the PieDonut series, giving you plenty of scope to have some fun!

More to say

First we want to say a little more on our slice labels and leverage ShinobiCharts for Android’s built in multi-line text capability. Of course you can choose any text you like, but many of you have asked to be able to show the data (y) value of the slice. Lets do that:

@Override
public void onUpdateSlice(PieDonutSlice slice, PieDonutSeries<?> series) {
    slice.setLabelText(slice.getY() + "\nTrillion (USD)");...
}

As you can see we now have the legend displaying the slice names, which in this example are countries, and the labels display the data, in this example GDP. Excellent!

Get into position

Next for a little more impact, lets move our slice label. We can put this anywhere on the chart, but lets keep things simple; we will move it outwards from the pie chart, relative to the angle of the slice. This can be done with some simple mathematics to modify the existing label center co-ordinates. We’ve also included an EXTRUSION value to allow some tweaking:

private void offsetLabelCenter(PieDonutSeries<?> series, PieDonutSlice slice) {
    private static final int EXTRUSION = 200;
    // add a little to the center of the slice label to move it outward
    
    float centerAngle = slice.getCenterAngle() + series.getRotation();
    slice.getLabelCenter().x = (int) (slice.getCenterX() - EXTRUSION
            * Math.sin(centerAngle));
    slice.getLabelCenter().y = (int) (slice.getCenterY() - EXTRUSION
            * Math.cos(centerAngle));
}

We then add a call to this method in our onUpdateSlice method of our OnPieDonutSliceUpdateListener implementation:

@Override
public void onUpdateSlice(PieDonutSlice slice, PieDonutSeries<?> series) {
    slice.setLabelText("slice\n" + slice.getLabelText());
    offsetLabelCenter(series, slice);
}

Make a connection

Implementing the code above will make the pie slice labels appear to float around the outer edge of the chart. But they seem a little lost! Lets connect them to the chart by means of some ‘spokes’. For this we need to implement the OnPieDonutSliceLabelDrawListener interface. The onDrawLabel method within this class provides great opportunity to get creative with the label before it is drawn. In the code below we use the slice center and the label center to draw a connecting line. Next we use the co-ordinates of the existing background label Rect to draw a nicer background with rounded edges. Finally, we write our text to the label, giving it a different color:

public class DrawLabelWithLinesListener implements OnPieDonutSliceLabelDrawListener {
    private static RectF bg = new RectF();

    @Override
    public void onDrawLabel(Canvas canvas, PieDonutSlice slice, Rect bgLabelRect,
            PieDonutSeries<?> series) {
        // Apply a styled background to the slice label, and join it to the
        // chart with a 'spoke'
        // Draw line
        slice.getLabelPaint().setColor(Color.WHITE);
        canvas.drawLine(slice.getCenterX(), slice.getCenterY(), slice.getLabelCenter().x,
                slice.getLabelCenter().y, slice.getLabelPaint());
        // Draw background
        slice.getLabelBackgroundPaint().setColor(Color.GRAY);
        bg.set(bgLabelRect.left, bgLabelRect.top, bgLabelRect.right,
                bgLabelRect.bottom);
        canvas.drawRoundRect(bg, 10.0f, 10.0f, slice.getLabelBackgroundPaint());
        // And finally draw the text - use ChartUtils as this handles multi
        // line text. Use the label paint to honor already applied styling
        ChartUtils.drawText(canvas, slice.getLabelText(), slice.getLabelCenter().x,
                slice.getLabelCenter().y, slice.getLabelPaint());
    }
}

As you can see this method offers plenty of scope for making high impact labels. You will notice that this method passes back a reference to not only the pie or donut slice, but also the canvas, the series and a background Rect which has already been created for you. You can either stick with this Rect or you can use it to create your own. As you have a reference to the canvas, you can draw whatever you like, wherever you like, onto it. The sky is the limit!

Last but not least

In order for our shiny new listener classes to be used, we need to connect them to our chart! This is very simple:

  shinobiChart.setOnPieDonutSliceUpdateListener(new ProtrudeAxisLabelListener());
  shinobiChart.setOnPieDonutSliceLabelDrawListener(new DrawLabelWithLinesListener());

Summary

Here I’ve covered the basics of customising the pie chart slice labels. It’s now over to you to flex your creative muscles! You can download the complete sample application here. Please do get in touch and show us your creations. Have fun!

 

Here at Shinobi HQ we are already looking ahead to the next release which promises more exciting new features. To make sure you hear the latest, follow us on Twitter @ShinobiControls.

Back to Blog