Saturday, October 13, 2012

PieChart in iPhone

I was in need to include a pie chart view in my iPhone project to represent usage graphically. I first came up with a solution. That was to draw a circle of the full size and then drawing the angle that was calculated to the usage size i wanted to represent over the same circle with a different color. I did that into a simple drawRect function. Below are the codes i did.
float endDeg = [currentSize floatValue]/[maxSize floatValue];
NSLog(@"the end degree is : %f",endDeg);
endDeg = endDeg*360.00;
NSLog(@"the end degree is : %f",endDeg);
if(endDeg>360)
{
endDeg=360;
}
int x = 90;
int y = 80;
int r =70;
CGContextRef ctx=UIGraphicsGetCurrentContext();
CGContextSetRGBFillColor(ctx, 0, 255,0, 1.0);
CGContextMoveToPoint(ctx,x,y);//center point
CGContextAddArc(ctx,x,y,r,(0)*M_PI/180.0,(360)*M_PI/180.0,0);
CGContextFillPath(ctx);
CGContextSetRGBFillColor(ctx, 0,0,255, 0.9);
CGContextMoveToPoint(ctx,x,y);
CGContextAddArc(ctx,x,y,r,(0)*M_PI/180.0,(endDeg)*M_PI/180.0,0);
CGContextFillPath(ctx);
got the output but not the exact solution i needed. I Wanted some animation to that. Exploration ended in xyPieChart. I just simply integrated the class and customized it to what i needed and came up what i longed for. You can download the xyPieChart from here
There are hell out of frameworks open-sourced for graphical representation of data. 
I just included the xyPieChart classes to my project and the
In ViewDidLoad of the class where i needed to display the chart i included the following
Initiated the slice array which represents the number of slices in the Chart. And added the slice value to the array.
self.slices = [NSMutableArray arrayWithCapacity:2];
[_slices addObject:usedSize];
usedSize = [NSNumber numberWithInt:[maxSize intValue]-[usedSize intValue]];
[_slices addObject:usedSize];
[self.pieChartRight setDelegate:self];
[self.pieChartRight setDataSource:self];
[self.pieChartRight setPieCenter:CGPointMake(95,80)];
[self.pieChartRight setShowPercentage:YES];
self.pieChartRight.backgroundColor =[UIColor blackColor];
self.pieChartRight.layer.cornerRadius =10;
self.pieChartRight.layer.borderWidth = 1;
self.pieChartRight.layer.borderColor = [[UIColor colorWithRed:(188/255.f) green:230 blue:0 alpha:1.0] CGColor];
[self.percentageLabel.layer setCornerRadius:100];
self.sliceColors =[NSArray arrayWithObjects:
[UIColor colorWithRed:(0/255.f) green:0 blue:255 alpha:1.0],
// [UIColor colorWithRed:229/255.0 green:66/255.0 blue:115/255.0 alpha:1],
[UIColor colorWithRed:(0/255.f) green:255 blue:0 alpha:1.0],

and then i  included the follwing delegates.

//delegate for piechart
#pragma mark - XYPieChart Data Source

- (NSUInteger)numberOfSlicesInPieChart:(XYPieChart *)pieChart
{
return self.slices.count;
}

- (CGFloat)pieChart:(XYPieChart *)pieChart valueForSliceAtIndex:(NSUInteger)index
{
return [[self.slices objectAtIndex:index] intValue];
}

- (UIColor *)pieChart:(XYPieChart *)pieChart colorForSliceAtIndex:(NSUInteger)index
{
return [self.sliceColors objectAtIndex:index];
}

#pragma mark - XYPieChart Delegate
- (void)pieChart:(XYPieChart *)pieChart didSelectSliceAtIndex:(NSUInteger)index
{
NSLog(@"did select slice at index %d",index);
self.selectedSliceLabel.text = [NSString stringWithFormat:@"$%@",[self.slices objectAtIndex:index]];
}
Thats it i got the chart displayed well on my page animated.





1 comment: