CODEWITHSUNDEEP
androidchartspie-chart
RaagaSudha
RaagaSudha

Reputation: 397

How to display text dynamically on pie chart in android?

I have worked on pie chart in android. I found an excellent solution from http://tutorials-android.blogspot.in/2011/05/how-create-pie-chart-in-android.html and worked on that. I am able to display the pie chart with colors but in my application in addition to colors I need to display the text also dynamically on that pie chart. How can I display text dynamically on those pie chart slices?

Please help me regarding this...Will be thankful...

Upvotes: 0

Views: 5502

Answers (4)

AMAN SINGH
AMAN SINGH

Reputation: 3561

You can use the library called MPAndroidChart, which is very simple and easy to use. Simply import this

 compile 'com.github.PhilJay:MPAndroidChart:v3.0.1'

and add this line in your gradle file

allprojects {
repositories {
    maven { url "https://jitpack.io" }
}
}

Hope this will help you.

Upvotes: 1

GPMorgan
GPMorgan

Reputation: 106

To draw text at the centre of each pie chart segment you need to calculate the centre of each segment. The centre of each text item to paint on that segment should align with that centre point - which is achieved by subtracting half the text bounds width from the central x coord (or using paint.setTextAlign(Align.CENTER); ) and half the text bound height from the central y coord.

As for finding the centre of a segment, it requires just a little bit more consideration than using simple geometry.

The central coords of a segment can be found by:

x = (/* radius of pie chart */ /2)*cos(/*angle in RADIANS */) [angle in radians = Math.toRadians(/*half the sweep angle in degrees*/)

y = (/* radius of pie chart */ /2)*sin(/*angle in RADIANS */)

Almost there... dont forget to add the x and y coords of the centre of your pie chart to the above x and y values, otherwise you're trying to paint on a circle centring on (0,0) in your custom view!

Say your pie chart is centred at the actual centre of your view, you want to be adding:

x += getWidth()/2; y += getHeight()/2;

Last but not least, accounting for the length of the text to be painted - get the bounds of your text using, for example:

Paint paint = new Paint(); paint.setColor(Color.WHITE); paint.setTextAlign(Align.CENTER); // This centres the text horizontally

String labelText = "TEST"; Rect textBounds = new Rect(); paint.getTextBounds(labelText, 0, labelText.length(), textBounds);

y -= textBounds.height()/2;

Then your text should appear correctly.

Upvotes: 1

Pratik Patel
Pratik Patel

Reputation: 474

To draw piechart you had use very long process.....Hope this help you.. 

public class Demo extends Activity {
    /** Called when the activity is first created. */
    float values[]={500,400,300,200,100};
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    LinearLayout linear=(LinearLayout) findViewById(R.id.linear);
    values=calculateData(values);
    linear.addView(new MyGraphview(this,values));

}
private float[] calculateData(float[] data) {
    // TODO Auto-generated method stub
    float total=0;
    for(int i=0;i<data.length;i++)
    {
        total+=data[i];
    }
    for(int i=0;i<data.length;i++)
    {
    data[i]=360*(data[i]/total);            
    }
    return data;

}
public class MyGraphview extends View
{
    private Paint paint=new Paint(Paint.ANTI_ALIAS_FLAG);
    private float[] value_degree;
    private int[] COLORS={Color.BLUE,Color.GREEN,Color.GRAY,Color.CYAN,Color.RED};
    RectF rectf = new RectF (10, 10, 200, 200);
    int temp=0;
    public MyGraphview(Context context, float[] values) {

        super(context);
        value_degree=new float[values.length];
        for(int i=0;i<values.length;i++)
        {
            value_degree[i]=values[i];
        }
    }
    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);

        for (int i = 0; i < value_degree.length; i++) {//values2.length; i++) {
            if (i == 0) {
                paint.setColor(COLORS[i]);
                canvas.drawArc(rectf, 0, value_degree[i], true, paint);
            } 
            else
            {
                    temp += (int) value_degree[i - 1];
                    paint.setColor(COLORS[i]);
                    canvas.drawArc(rectf, temp, value_degree[i], true, paint);
            }
        }
    }

}

}

Which set the color according to values in decending order... And for text,you can set dynamic text separately and give color square in front of text:)

Upvotes: 1

Martin
Martin

Reputation: 4816

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  if (mState != IS_READY_TO_DRAW) {
   return;
  }
  canvas.drawColor(mBgcolor);
  mBagpaints.setAntiAlias(true);
  mBagpaints.setStyle(Paint.Style.FILL);
  mBagpaints.setColor(0x88FF0000);
  mBagpaints.setStrokeWidth(0.0f);
  mLinePaints.setAntiAlias(true);
  mLinePaints.setColor(0xff000000);
  mLinePaints.setStrokeWidth(3.0f);
  mLinePaints.setStyle(Paint.Style.STROKE);
  RectF mOvals = new RectF(mGapleft, mGapTop, mWidth - mGapright, mHeight
    - mGapBottm);
  mStart = START_INC;
  PieDetailsItem item;
  for (int i = 0; i < mdataArray.size(); i++) {
   item = (PieDetailsItem) mdataArray.get(i);
   mBagpaints.setColor(item.color);
   mSweep = (float) 360* ((float) item.count / (float) mMaxConnection);
   canvas.drawArc(mOvals, mStart, mSweep, true, mBagpaints);
   canvas.drawArc(mOvals, mStart, mSweep, true, mLinePaints);
   mStart = mStart + mSweep;


  // set your text here
  canvas.drawText("here is some text", mStart, someYvalue, mLinePaints);
  }

  mState = IS_DRAW;
 }

Just some drawText() calls ought to work fine. You'll have to do a little math to decide where your y coordinate should be

Upvotes: 0

Related Questions