- the occasional blog - http://rajeev.name -

Drawing Pie Charts using iPhone SDK

Posted By rajeev karamchedu On January 18, 2009 @ 1:11 pm In Technology | 26 Comments

Here’s one way to draw a PIE chart using the latest iPhone SDK. There are a ton of tutorials out there that let you get started with the iPhone app development itself and I am by no means any authoritative source on learning how to develop one. Having said that, here’s a class file that will help you use the UIKit and Quartz [1]to draw vector graphics.


An example of the pie charts the code base generates is below (a screenshot):

iPhone SDK

And now, for the code:

GraphView.h

1
2
3
4
5
6
7
8
9
10
11
12
#
#(nothing to see here)
#
 
#import <UIKit/UIKit.h>
#import <Foundation/Foundation.h>
 
@interface GraphView : UIView {
 
}
 
@end

GraphView.m

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
#import "GraphView.h"
 
#define PI 3.14159265358979323846
static inline float radians(double degrees) { return degrees * PI / 180; }
 
@implementation GraphView
 
- (void)drawRect:(CGRect)rect {
 
	CGRect parentViewBounds = self.bounds;
	CGFloat x = CGRectGetWidth(parentViewBounds)/2;
	CGFloat y = CGRectGetHeight(parentViewBounds)*0.55;
 
    // Get the graphics context and clear it
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextClearRect(ctx, rect);
 
	// define stroke color
	CGContextSetRGBStrokeColor(ctx, 1, 1, 1, 1.0);
 
	// define line width
	CGContextSetLineWidth(ctx, 4.0);
 
 
       // need some values to draw pie charts
 
        double snapshotCapacity =20;
        double rawCapacity = 100;
        double systemCapacity = 1;
 
	int offset = 5;
	double pie1_start = 315.0;	
	double pie1_finish = snapshotCapacity *360.0/rawCapacity; 
	double system_finish = systemCapacity*360.0/rawCapacity;
 
    CGContextSetFillColor(ctx, CGColorGetComponents( [[UIColor greenColor] CGColor]));
    CGContextMoveToPoint(ctx, x+2*offset, y);     
    CGContextAddArc(ctx, x+2*offset, y, 100,  radians(snapshot_start), radians(snapshot_start+snapshot_finish), 0); 
    CGContextClosePath(ctx); 
    CGContextFillPath(ctx); 
 
	// system capacity 
	CGContextSetFillColor(ctx, CGColorGetComponents( [[UIColor colorWithRed:15 green:165/255 blue:0 alpha:1 ] CGColor]));
	CGContextMoveToPoint(ctx, x+offset,y);     
    CGContextAddArc(ctx, x+offset, y, 100,  radians(snapshot_start+snapshot_finish+offset), radians(snapshot_start+snapshot_finish+system_finish), 0); 
    CGContextClosePath(ctx); 
    CGContextFillPath(ctx); 
 
	/* data capacity */
	CGContextSetFillColor(ctx, CGColorGetComponents( [[UIColor colorWithRed:99/255 green:184/255 blue:255/255 alpha:1 ] CGColor]));
	CGContextMoveToPoint(ctx, x, y);     
    CGContextAddArc(ctx, x, y, 100,  radians(snapshot_start+snapshot_finish+system_finish+offset), radians(snapshot_start), 0); 
    CGContextClosePath(ctx); 
    CGContextFillPath(ctx);	
}

There are some variables such as snapshot_start etc in the code that are missing values, cause I picked this code out of a larger program I am writing.


26 Comments (Open | Close)

26 Comments To "Drawing Pie Charts using iPhone SDK"

#1 Comment By cak On February 4, 2009 @ 1:33 am

This doesn’t work, where is snapshot_start defined? Have you even tried to run this? If you have, you are missing something out.

#2 Comment By rajeev karamchedu On February 17, 2009 @ 5:41 pm

Hi cak

yes it does work. snapshot_start is just a variable.. define whatever variable you prefer and some values to actually draw the pie charts. I will upload some pictures shortly..

#3 Comment By Bob Donahue On March 3, 2009 @ 3:01 pm

I’m trying to find a general data plotting library for the iPhone.

Seems weird that I’d have to develop it from scratch, just to do a simple X,Y scatter plot or a bar graph.

Are you aware of any existing packages?

Thanks in advance,
Bob

#4 Comment By rajeev karamchedu On March 4, 2009 @ 12:14 pm

Bob

You may want to take a look at the following packages

[2]
[3]

There’s always Quartz to draw graphs from scratch, as you mentioned. I use Quartz but I might take a look at those packages myself, given some time.

#5 Comment By Vinayak On April 16, 2009 @ 1:44 am

Hi,
when i run this code got blank white screen only. can you please submit the steps how to execute this code from begin in short.

just like

1. select window base application
2. add GraphView.h and GraphView.m

.
.
. finish

like this.

#6 Comment By Vinayak On April 16, 2009 @ 2:46 am

Hi Rajeev ,
I desperately need pie chart code. Please help me out.

#7 Comment By mike On May 7, 2009 @ 7:59 am

why are you defining PI on line 3 if you can use the constant M_PI?

#8 Comment By rajeev karamchedu On May 14, 2009 @ 12:19 pm

Been a while since I picked up programming, so it’s a case of blissful ignorance!

#9 Comment By iphone architect On May 21, 2009 @ 9:28 am

thanks for the excelent post, need to integrate into my app

#10 Pingback By Howto: Drawing Pie Charts using iPhone SDK | Iphone Development Exchange On September 6, 2009 @ 1:26 pm

[...] Drawing Pie Charts using iPhone SDK [...]

#11 Pingback By Top 15 Must-Have iPhone SDK Tutorials with source code | Iphone Development Exchange On September 9, 2009 @ 10:42 am

[...] Learn how to draw Pie Charts using the latest iPhone [...]

#12 Comment By adam m On January 15, 2010 @ 7:07 pm

this example worked great ! To make it work out of the box, replace the CGxxxx stuff at the bottom with this: It just uses the pie1_start, and the pie1_finish.

CGContextSetFillColor(ctx, CGColorGetComponents( [[UIColor greenColor] CGColor]));
CGContextMoveToPoint(ctx, x+2*offset, y);
CGContextAddArc(ctx, x+2*offset, y, 100, radians(0), radians(0), 0);
CGContextClosePath(ctx);
CGContextFillPath(ctx);

// system capacity
CGContextSetFillColor(ctx, CGColorGetComponents( [[UIColor colorWithRed:15 green:165/255 blue:0 alpha:1 ] CGColor]));
CGContextMoveToPoint(ctx, x+offset,y);
CGContextAddArc(ctx, x+offset, y, 100, radians(pie1_start), radians(pie1_finish), 0);
CGContextClosePath(ctx);
CGContextFillPath(ctx);

/* data capacity */
CGContextSetFillColor(ctx, CGColorGetComponents( [[UIColor colorWithRed:99/255 green:184/255 blue:255/255 alpha:1 ] CGColor]));
CGContextMoveToPoint(ctx, x, y);
CGContextAddArc(ctx, x, y, 100, radians(pie1_finish), radians(pie1_start), 0);
CGContextClosePath(ctx);
CGContextFillPath(ctx);

to add it to your main window just put these lines in Your’AppDelegate.m’

GraphView *graph = [[GraphView alloc] initWithFrame:CGRectMake(0.0, 20.0, 320.0, 460.0)];
[window addSubview:graph];

#13 Comment By Sohel Taslim On February 21, 2010 @ 10:25 pm

It works for me without any problem. Nice documentation.
Thanks for the work.
I am looking for more better resource. Your code will help me to build my expected one.

#14 Comment By J2Lite On April 6, 2010 @ 1:16 am

Core Plot framework provides a better way to create Pie Charts. You can use even custom gradients for shading the Pie Slices. [4]

#15 Comment By rajeev karamchedu On April 6, 2010 @ 7:17 am

Thanks for sharing! The screenshots for core plot look impressive!

#16 Comment By Dave Janssen On April 27, 2010 @ 3:01 pm

Thanks for the post. I tried using core-plot, but is doesn’t seem to allow you to add labels to slices in a pie chart, at least not at the moment. So I will use Quartz for the time being.

#17 Comment By plusz On October 13, 2010 @ 3:47 pm

Nice tutorial. I made something much more sophisticated. 3D charts with user interaction available :)

there is new, nice Pie Chart 3D library. 3D charts which you can rotate and scale with fingers + protocol for getting information about tapped slice

[5]

#18 Comment By Naren On October 19, 2010 @ 7:18 am

Hi Rajeev,
Thanks for the code,
rendering of pie chart is ok but can you give me an idea of how to identify the touch event on different pie slices. if you know a way please help me out regarding this.

With Thanks
Naren Mudgal

#19 Comment By Brad On November 14, 2010 @ 4:11 pm

Well…this piece of code is definetly quite strange…

where does the red color come from? I changed every value, but it stays always red…The blue color can be changed. The red not.

#20 Comment By Renuga On January 21, 2011 @ 5:15 am

For me error coming in this line.

CGRect parentViewBounds = self.bounds;

error:request for member ‘bounds’ in something not a structure or union

Exactly I want to draw a pie chart in my iphone application…Help me out to do this….

#21 Comment By Rob Parry On March 8, 2011 @ 7:25 am

Line 50:
CGContextSetFillColor(ctx, CGColorGetComponents( [[UIColor colorWithRed:99/255 green:184/255 blue:255/255 alpha:1 ] CGColor]));
is equivalent to:
CGContextSetFillColor(ctx, CGColorGetComponents( [[UIColor colorWithRed:0 green:0 blue:1 alpha:1 ] CGColor]));
As we all know, in C (and Objective-C), 99/255 = 184/255 = 0, 255/255 = 1.
I think the intention was to use 99.0/255.0, 184.0/255.0 & 1.0?

#22 Comment By Sekhar On March 22, 2011 @ 10:51 am

I am also getting the same error? missing any library ?

#23 Comment By raghu On March 24, 2011 @ 7:50 am

even though i specified the values for snapshot_start and snapshot_stop still am getting the same white screen just tel me how to render the graph.thanks in advance…

#24 Comment By Ashish On May 19, 2011 @ 12:20 am

hey. I just found a code which is very easy to use.. It took me only 5 mins to put it into my app. [6]

#25 Comment By JItendra Mandal On July 13, 2011 @ 2:36 am

HI rajeev

I want to draw line graph (like market NSE BSE stock graph with time) how can we do that i googled a lot but it give coreplot and S7graphview both are not useful for me..

Please help

#26 Comment By Wakjob On October 12, 2011 @ 5:30 pm

You should be using a standard macro such as:

#define degreesToRadian(x) (CGFloat)M_PI * (x) / (CGFloat)180.0 )


Article printed from the occasional blog: http://rajeev.name

URL to article: http://rajeev.name/2009/01/18/drawing-pie-charts-using-iphone-sdk/

URLs in this post:

[1] UIKit and Quartz : http://developer.apple.com/iphone/library/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/GraphicsandDrawing/chapter_6_section_4.html

[2] : http://developer.snowmintcs.com/frameworks/sm2dgraphview/

[3] : http://sourceforge.net/projects/narrative

[4] : http://www.j2lite.com/articles/pie-chart-drawing-in-iphone-using-core-plot-library.html

[5] : http://iphone.orpi.pl/?p=20

[6] : http://soulwithmobiletechnology.blogspot.com/2011/05/very-easy-way-to-create-pie-charts-in.html