Drawing circle in Objective-c

Question

I am a beginner in iPhone programing. I need to create circles like Figure 1, where it should be divided in six different parts with four different levels (see Figure 1). Furthermore I need to create a circle according to a given data as it is shown on Figure 2. Each part should be click-able to zoom the specific part (see Figure 3).

Figure 1: Illustrates six different colors, where two of them are divided in one and the rest four of them are divided in three parts.

Figure 2: Shows the results of different categories in different levels.

Figure 3: Is a zoomed vision of chosen category.

I have a storyboard which loads loads a custom UIView and using drawRect method to draw the circle.

The question is now, how to create the pie chart like the figures?

I have tried lots of things and could use some guideness - or please give an example of this.
Thanks

Answer 1

If you in any way want to have the changes animate (like when you zoom in on a category in the last image) then you should really try and use as much Core Animation as possible.

Have a look at this great tutorial on making a custom animatable pie chart with Core Animation. I'm sure that you can modify it to get what you want.

Also, if you don't care about animations and are okay with only displaying circles that jump from state to state then Core Animation will probably just make things overly complex and thing like Core Graphics (like the other answers mentioned) is probably the right way to go.

Answer 2

Pie Chart Example:

int sum = 0;
CGFloat offset;
CGFloat angleArray[numberOfSections+1];

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetAllowsAntialiasing(context, true);
CGContextSetShouldAntialias(context, true);

for(int i=0; i<numberOfSections; i++) {
    sum += angle;
}

for(int i=0; i<numberOfSections; i++) {
    angleArray[i] = (float)((angle)/(float)sum)*(2*M_PI); 
    CGContextMoveToPoint(context, radius, radius);

    if(i == 0) {
        CGContextAddArc(context, radius, radius, radius, 0, angleArray[i], 0);
    } else {
        CGContextAddArc(context, radius, radius, radius, offset, (offset+angleArray[i]), 0);
    }
    offset += angleArray[i];

    CGContextSetFillColorWithColor(context, ((UIColor *)[hjulColorArray objectAtIndex:i]).CGColor);
    CGContextClosePath(context); 
    CGContextFillPath(context);
}

Answer 3

Actually I think this revised answer will help you more in the long run. Take a look at the documentation for these:

CGPathAddLineToPoint    
CGPathAddArc

This is what I used to do basically exactly what your trying to do.

Answer 4

Take a look at the Quartz 2D Programming Guide, especially the Ellipses and the Clipping to Paths sections. The rest is just some basic math and geometry.

You subclass UIView, use the Quartz 2D framework to draw your circles and probably implement the touchesBegan: and touchesEnded: methods to handle taps on the circles.