how to implement PieChart in android sample source code

This demo demonstrates the usage of Android Graphics API to create simple 2D Pie chart and handling of touch event on the Pie-chart. This demo draws the 2D Pie chart based on the given data inputs, colors. Data legends are shown at the bottom of the chart as shown in the below image. Also, it handles the touch events and identifies the particular pie slice whether touched or not to support drilled down features.

Pie Chart using Android Graphics API

Let me explain the application in more details, the steps to draw the Pie-Chart.

1. Create a simple view layout containing one Image View. (activity_main.xml)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

<ImageView

    android:id="@+id/image_placeholder"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:adjustViewBounds="false"

    android:background="#000000"

    android:scaleType="center" />

</RelativeLayout>

2. Create a main activity which contains the above layout (MainActivity.java)

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

       

        //main layout

        setContentView(R.layout.activity_main);

        

        //pie chart parameters

        int data_values[] = { 20,10,25,5,15,25};

        int color_values[] = {Color.MAGENTA, Color.RED, Color.GREEN,Color.BLUE,Color.YELLOW,Color.CYAN};

        String itemnames[] = { "item 1", "item 2", "item 3", "item 4", "item 5","item 6"};

        

        //get the imageview

        ImageView imgView = (ImageView ) findViewById(R.id.image_placeholder);

         

        //create pie chart Drawable and set it to ImageView

        PieChart pieChart = new PieChart(this, imgView, itemnames, data_values, color_values);

        imgView.setImageDrawable(pieChart);

    }

Create  the required pie-chart parameters like data values, names, colors and create PieChart drawable Shape instance and assign to Image View.

3. PieChart Drawable Shape

Create a PieChart Class by extending Drawable Class and  implementation for OnTouchLister.

public class PieChart extends Drawable implements OnTouchListener {....}

Add the constructor with the required parameters for to draw the Pie Chart.

     public PieChart(Context c, View v, String[] data_names, int[] data_values, int[] color_values) {

         context = c;

         view = v;

         this.data_values = data_values;

         this.color_values = color_values;

         this.data_names = data_names;

         

         paint = new Paint();

         view.setOnTouchListener(this);

     }

And Now, Overwrite the draw() method with the below steps

• Get the screen width & height
• Calculate the chart area in Rectangle area
• Calculate the start angle and Sweep angle for each data item
•  And finally Draw the Arc, legend box, legend text with corresponding paint.

public void draw(Canvas canvas) {

// TODO Auto-generated method stub

//screen width & height

int view_w = view.getWidth();

        int view_h = view.getHeight();

        

     //chart area rectangle

      arc_bounds = new RectF(

                 left_edge,

                 top_edge,

                 right_edge,

                 bottom_edge

         );

        //sum of data values

        for (int datum : data_values)

                value_sum += datum;

        

        float startAngle = 0;

        int i = 0;

  

        for (int datum : data_values) {

                if (datum == 0) continue;

                

                //calculate start & end angle for each data value

                float endAngle = value_sum == 0 ? 0 : 360 * datum / (float) value_sum;

                float newStartAngle = startAngle + endAngle;

                

             

                int flickr_pink = color_values[i % color_values.length];

                paint.setColor(flickr_pink);

                paint.setAntiAlias(true);

                paint.setStyle(Paint.Style.FILL);

                paint.setStrokeWidth(0.5f);

                

                //gradient fill color

                LinearGradient linearGradient = new LinearGradient(arc_bounds.left, arc_bounds.top, arc_bounds.right,arc_bounds.bottom, flickr_pink, Color.WHITE, Shader.TileMode.CLAMP);

                paint.setShader(linearGradient);

                

                //draw fill arc

                canvas.drawArc(arc_bounds, startAngle, endAngle, true, paint);

            

                Paint linePaint = new Paint();

                linePaint.setAntiAlias(true);

                linePaint.setStyle(Paint.Style.STROKE);

                linePaint.setStrokeJoin(Join.ROUND);

                linePaint.setStrokeCap(Cap.ROUND);

                linePaint.setStrokeWidth(0.5f);

                linePaint.setColor(Color.BLACK);

                //draw border arc

                canvas.drawArc(arc_bounds, startAngle, endAngle, true, linePaint);

                

                int barStartX = 50;

                int barWidth = 20;

                int barStartY = view_h-padding_bottom+(i-1)*2*barWidth;

               

                Rect barRect = new Rect(barStartX,barStartY,barStartX+barWidth,barStartY+barWidth);

                

                //draw legend box

                canvas.drawRect(barRect, paint);

                canvas.drawRect(barRect,linePaint);

                

                

                Paint textPaint = new Paint();

                textPaint.setAntiAlias(true);

                textPaint.setColor(Color.WHITE);

                textPaint.setTextSize(30);

                

                //draw legend text

                canvas.drawText(data_names[i], barStartX+2*barWidth, barStartY+barWidth, textPaint);

                

                startAngle = newStartAngle;

                i++;

        }

}

4.. Adding Touch Listener

Now, Implement the onTouchListener with below steps,

• Get mouse down event
• Calculate the click angle
• Check the condition with the start angle and Sweep angle for each data item

public boolean onTouch(View v, MotionEvent event) {

// TODO Auto-generated method stub

//mouse down event

if( event.getAction() == MotionEvent.ACTION_DOWN)

{

double clickAngle;

//relative x & y position

float xPos = event.getX() - arc_bounds.centerX();

float yPos = event.getY() - arc_bounds.centerY();

//calcuate the click angle

clickAngle = Math.atan2(yPos,xPos) * 180 / Math.PI;

if(clickAngle < 0)

clickAngle = 360 + clickAngle;

float startAngle = 0;

int itemIndex = 0;

for (int datum : data_values) {

if (datum == 0) continue;

float endAngle = value_sum == 0 ? 0 : 360 * datum / (float) value_sum;

float newStartAngle = startAngle + endAngle;

 

//check the condition of start angle & end angle of data item.

             if(arc_bounds.contains(event.getX(),event.getY())  && clickAngle > startAngle && clickAngle < newStartAngle)

             {

            

             Toast.makeText(context, data_names[itemIndex] + "  is clicked!!", Toast.LENGTH_LONG).show();

             Log.d(TAG,"pie item is clicked-->" + data_names[itemIndex]);

             break;

             }

           

             itemIndex++;

startAngle = newStartAngle;

}

}

return false;

}

the below image shows the Toast message when the particular pie slice is touched. Based on this event, drilled down feature will be supported like starting activity or reloading the view with different data values.

PieChart with OnTouchLister Implementation

Conclusion:

The above sample demo application uses the Android Graphics API to draw simple 2D PieChart and supports the touch events. calculation used for detecting the Pie Slice is shown in the above sample. This sample will help to create interactive charts, decision like starting new activity, different view based on the pie slice selection.