|
A pie chart is a circular chart divided into sectors. In a pie chart, the arc length of each sector is proportional to the quantity it represents. It is used to showcase different percentages of an entity distributed with time or any other parameter. For example it can be used to show Profit of a company distributed over 12 months of a year. Less profit means smaller arc for that month and vice-versa. In I-Phone we might have a application which needs to showcase a Pie chart view for different kind of data. Suppose the application have option to show profit distribution over month, employee distribution over different centers, Projects delivered over different months and so on. So here is a class which can handle all these data and will draw chart according to them. |
|
1. add PieChartView.h and copy the code below |
#import
#import
@interface PieChartView : UIView
{
BOOL_createChart;
doublestart;
doubleend;
float_xAxis;
float_yAxis;
CGFloat_radiusOfChart;
NSMutableArray* _colorArray;
NSMutableArray* _percentageArray;
}
@property(readonly)BOOL _createChart;
@property(readwrite)CGFloat _radiusOfChart;
-(void)setColor:(NSArray *)colorOfArcs setPercentage:(NSArray *)percentageOfEachArc;
-(void)setRadius:(CGFloat)radius RelativeCentreXaxis:(float)X Yaxis:(float)Y;
@end
2. In .m of above class add following code
#import "PieChartView.h"
#define PI 3.14159265358979323846
@implementation PieChartView
@synthesize _createChart;
@synthesize _radiusOfChart;
-(float)radians:(double)degrees
{
return degrees * PI / 180;
}
- (id)initWithFrame:(CGRect)frame {
if ((self = [super initWithFrame:frame]))
{
// Initialization code
_radiusOfChart = 100;
_createChart = NO;
_xAxis = 0.0;
_yAxis = 0.0;
}
returnself;
}
-(void)setRadius:(CGFloat)radius RelativeCentreXaxis:(float)X Yaxis:(float)Y
{
_radiusOfChart = radius;
//_xAxis and _yAxis are displacement of the centre of Pie Chart from the center of the screen.
_xAxis = X;
_yAxis = Y;
}
-(void)setColor:(NSArray *)colorOfArcs setPercentage:(NSArray *)percentageOfEachArc
{
_colorArray = [[NSMutableArray alloc] initWithArray:colorOfArcs];
_percentageArray = [[NSMutableArray alloc] initWithArray:percentageOfEachArc];
//colors does not signify anything without percentage in a pie chart and also to show percentage of a class of data we need color.
//Hence the two arrays should be equal.
if(_colorArray.count < _percentageArray.count)
{
NSRange range = NSMakeRange(_colorArray.count, (_percentageArray.count - _colorArray.count));
[_percentageArrayremoveObjectsInRange:range];
}
elseif(_colorArray.count > _percentageArray.count)
{
NSRange range = NSMakeRange(_percentageArray.count, (_colorArray.count - _percentageArray.count));
[_percentageArrayremoveObjectsInRange:range];
}
double sumofPercentage = 0;
for(int i = 0; i < _percentageArray.count; ++i)
{
if(![[_percentageArrayobjectAtIndex:i] isKindOfClass:[NSNumberclass]])
{
UIAlertView* alertView = [[UIAlertViewalloc] initWithTitle:@"Error!!!!"message:@"Percentage array should have objects of NSNumber Class"delegate:selfcancelButtonTitle:nilotherButtonTitles:@"OK",nil];
[alertView show];
[_colorArrayremoveAllObjects];
[_percentageArrayremoveAllObjects];
break;
}
if([_percentageArrayobjectAtIndex:i] < 0)
{
UIAlertView* alertView = [[UIAlertViewalloc] initWithTitle:@"Error!!!!"message:@"Percentage can not be negative"delegate:selfcancelButtonTitle:nilotherButtonTitles:@"OK",nil];
[alertView show];
[_colorArrayremoveAllObjects];
[_percentageArrayremoveAllObjects];
break;
}
if(![[_colorArrayobjectAtIndex:i] isKindOfClass:[UIColorclass]])
{
UIAlertView* alertView = [[UIAlertViewalloc] initWithTitle:@"Error!!!!"message:@"Color array should have objects of UIColor Class"delegate:selfcancelButtonTitle:nilotherButtonTitles:@"OK",nil];
[alertView show];
[_colorArrayremoveAllObjects];
[_percentageArrayremoveAllObjects];
break;
}
sumofPercentage += [[_percentageArray objectAtIndex:i] doubleValue];
if(sumofPercentage > 100)
{
UIAlertView* alertView = [[UIAlertViewalloc] initWithTitle:@"Error!!!!"message:@"Sum of all percentages is greater than 100"delegate:selfcancelButtonTitle:nilotherButtonTitles:@"OK",nil];
[alertView show];
[_colorArrayremoveAllObjects];
[_percentageArrayremoveAllObjects];
break;
}
}
if(_colorArray.count > 0)
_createChart = YES;
}
-(void)addDetail
{
UILabel *detail =[[[UILabelalloc]initWithFrame:CGRectMake(10, 20, 300, 40)]autorelease];
detail.text = @"Pie Chart";
detail.textColor = [UIColorwhiteColor];
detail.font = [UIFontboldSystemFontOfSize:20];
detail.backgroundColor = [UIColorclearColor];
[self addSubview:detail];
}
- (void)drawRect:(CGRect)rect
{
CGRect parentViewBounds = self.bounds;
CGFloat x = CGRectGetWidth(parentViewBounds)*0.5 + _xAxis;
CGFloat y = CGRectGetHeight(parentViewBounds)*0.5 + _yAxis;
// 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);
if(!_createChart)
return;
[selfaddDetail];
start = 0;
end = 0;
for(int i = 0; i < _colorArray.count; ++i)
{
end = ([[_percentageArrayobjectAtIndex:i] doubleValue]*360)/100;
CGContextSetFillColor(ctx, CGColorGetComponents( [[_colorArrayobjectAtIndex:i] CGColor]));
CGContextMoveToPoint(ctx, x, y);
CGContextAddArc(ctx, x, y, _radiusOfChart, [self radians:start], [self radians:(start + end)], 0);
CGContextClosePath(ctx);
CGContextFillPath(ctx);
start += end;
}
}
- (void)dealloc
{
[_colorArrayrelease];
[_percentageArrayrelease];
[super dealloc];
}
@end
3. The add detail function can be updated/changed according to the user requirement for showing the details about the different sections of Pie chart
4. To create a Pie chart now, we only need to make an object of the above class and set the desired parameters.
The following code can be written in any class which is pushing the view on the screen.
PieChartView* chartView = [[PieChartViewalloc] init]; [chartView setRadius:100RelativeCentreXaxis:0Yaxis:0]; //colorArray is a array having UIColor's for different sections. //percentageArray holds the percentage of a section in Pie chart which would be proportional to the data in that period //Both arrays can be filled using plist. [chartView setColor: colorArray setPercentage: percentageArray];
5. Push the View on the screen.
6. For different type of distributions we now only need to change the colorArray and percentageArray.