xyfeng / xypiechart

A simple and animated Pie Chart for your iOS app.

XYPieChart

XYPieChart is an simple and easy-to-use pie chart for iOS app. It started from a Potion Project which needs an animated pie graph without interaction. All animation was implemented in the drawRect: method. After played with BTSPieChart, really like its code structure, it’s clean, has well named functions, structure like a UITableView. XYPieChart rewrote the code, based on CALayers for the animation. Compared to BTSPieChart, XYPieChart is a prettier version, it has a simpler insert/delete slices algorithm, different design of slice selection, more flexible to customize. Video Demo

^{by MacBuildServer}

Features

• Customized color for slices (default color supported)
• animated insert/delete slice(s)
• slice selection animation
• text label option of showing percentage or actual value
• text label auto-hide when slice is too small
• customizable text label font and relative postion
• pie opening/closing animation
• pie starting angle support
• ARC support
• interface builder support

Installation

• Drag the XYPieChart/XYPieChart folder into your project.
• Add the QuartzCore framework to your project.

Usage

(see sample Xcode project in /Demo)

Set PieChart properties:

[self.pieChart setDelegate:self];
[self.pieChart setDataSource:self];
[self.pieChart setStartPieAngle:M_PI_2];	//optional
[self.pieChart setAnimationSpeed:1.0];	//optional
[self.pieChart setLabelFont:[UIFont fontWithName:@"DBLCDTempBlack" size:24]];	//optional
[self.pieChart setLabelColor:[UIColor blackColor]];	//optional, defaults to white
[self.pieChart setLabelShadowColor:[UIColor blackColor]];	//optional, defaults to none (nil)
[self.pieChart setLabelRadius:160];	//optional
[self.pieChart setShowPercentage:YES];	//optional
[self.pieChart setPieBackgroundColor:[UIColor colorWithWhite:0.95 alpha:1]];	//optional
[self.pieChart setPieCenter:CGPointMake(240, 240)];	//optional

Implement Data Source Methods:

- (NSUInteger)numberOfSlicesInPieChart:(XYPieChart *)pieChart;
- (CGFloat)pieChart:(XYPieChart *)pieChart valueForSliceAtIndex:(NSUInteger)index;
- (UIColor *)pieChart:(XYPieChart *)pieChart colorForSliceAtIndex:(NSUInteger)index;	//optional
- (NSString *)pieChart:(XYPieChart *)pieChart textForSliceAtIndex:(NSUInteger)index;	//optional

Implement  Delegate Methods (OPTIONAL):

- (void)pieChart:(XYPieChart *)pieChart willSelectSliceAtIndex:(NSUInteger)index;
- (void)pieChart:(XYPieChart *)pieChart didSelectSliceAtIndex:(NSUInteger)index;
- (void)pieChart:(XYPieChart *)pieChart willDeselectSliceAtIndex:(NSUInteger)index;
- (void)pieChart:(XYPieChart *)pieChart didDeselectSliceAtIndex:(NSUInteger)index;

Credits

XYPieChart is brought to you by XY Feng

xypiechart's Issues

Radius

Hi,
Thank you for making such a great library for pie charts.
I wanted to know that is it possible to change the radius of the individual elements on the graph using your library. Thanks in advance.

How to turn off animation?

Hey there,

I can't figure out how to turn off the animation for the pie charts. I'm loading them in a tableView and every time my cell gets re-rendered the animations fire, but I'd like to turn them off for subsequent loads.

When I remove the animation property, they animate, and when I set the animation time to 0 they don't show up.

Thanks

Selecting a label to select a slice.

I positioned the labels to appear outside the pie slices. Now I would like to be able to also select the text in order to select a pie slice.
I tried getting coordinates of each text label but strangely each label has the same cgpoints.

Is there a plan to make this a Swift Package library?

Or is there some easily compatible package with it that already is a Swift Package library? I ask partly because I am having trouble with the XCode build service and several StackOverflow pages say that the problem can be caused by using cocoapods. Thanks!

Line fill vs background color

This is more of an enhancement, but what are your thoughts only setting a line (fill + thickness) instead of a background color on the pie chart?

Something similar to this: https://www.dropbox.com/s/1a4a7hr7u970kns/Screenshot%202014-08-11%2008.43.58.png

If it is something that is "easily" adaptable i'd love to check it out and try giving it a shot.

redraw the pie if the frame is changed

I want to support landscape mode, but when i change the pieFrame when rotate, but the pie is remain the original size when created, and the pie content exceeds the bound of its view.....

How can I fix this issue? thanks.

Using XYPieChart inside CollectionViewCells

Great project!

I am trying to add XYPieCharts inside each of my UICollectionViewCell, and so far implemented the datasource and delegate methods inside my UICollectionViewCell.m file (should I be doing it this way?). The slice of each pie is supplied in the UICollectionViewController method: - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath.

However, I am running into the issue that none of the pies are showing. Am I correct in setting the datasource and delegate inside the cells as opposed to the view controller? What is the recommended way to doing this?

Thanks!

How can I create multiple level pie chart

Hi,

I want to create pie chart with more level of information

rformation to show. please find the image

Background color in the center.

How can I set the background color in the center which is white by default. I want to make it transperent so that image behind it can be displayed.

Non ARC running...

Hi!

what should i change (beside replacing strong with retain) to make it run in non-arc project?

Thanks.

How do I use the chart in UITableViewCell?

Hi, I was trying to use the pie chart in UITableViewCell, and was wondering what are the equivalent functions/methods for viewWillAppear/viewDidAppear/viewWillDisappear/viewDidDisappear in order for the pie chart to appear? Thank you!

if the slice size is not large enough to contain the slice text size, the text will not be shown

see below, if the slice size is not large enough to contain the slice text size, it will not be displayed....

I try to comment the codes below and allow to display text, but it seems that the text is covered by its sibling slices...... faint, is there any way to fix this?

Can we put the text layer above all the slice layers ???? so it won't be covered. thansk.

• (void)setShowPercentage:(BOOL)showPercentage
  {
  _showPercentage = showPercentage;
  for(SliceLayer _layer in _pieView.layer.sublayers)
  {
  CATextLayer *textLayer = [[layer sublayers] objectAtIndex:0];
  [textLayer setHidden:!_showLabel];
  if(!_showLabel) return;
  NSString *label;
  if(_showPercentage)
  label = [NSString stringWithFormat:@"%0.0f%%", layer.percentage_100];
  else
  label = (layer.text)?layer.text:[NSString stringWithFormat:@"%0.0f", layer.value];
  CGSize size = [label sizeWithFont:self.labelFont];

  if(M_PI*2*_labelRadius*layer.percentage < MAX(size.width,size.height))
  {
      [textLayer setString:@""];
  }
  else
  {
      [textLayer setString:label];
      [textLayer setBounds:CGRectMake(0, 0, size.width, size.height)];
  }
  

  }
  }

Opening the largest slice by default

Is there anyway I can open the largest slice by default without touching it?

getting such output using XyPieChart

Hi,
thank you for making such a cool library for pie charts. i came in a problem and i wanted to know if it can be done through this library. i need to draw this sort of pie chart, is it possible to make this using your library? thanks in advance

Disabling the gesture recognition?

Hi,
I don't use the gesture recognition (tapping on the slices, etc.) and I was wondering what is the best solution to disable it?

Shall I modify your code and add a BOOL property? And is there something simpler?

If you want I can do a pull request, but I wanted to know your opinion about it before.

Thanks

Piechart need to hide when it is not creating

Can we remove the space the piechart when it is not created ?

Rounding on percentage totals

Hi,

This is a really nice looking component, but as I've been experimenting with it, I think I've found an issue. It only occurs intermittently as it looks like it's due to rounding issues and as such will only occur with certain sets of numbers. I've found I can reliably reproduce by running the demo app and using the Random button to generate a sequence of number sets. I'll usually see the problem after 4 or 5 runs. The issue is that sometimes the total will be slightly over or slightly under 100. Typically it'll be over or under by 1. As I said, it doesn't always occur as it depends on the numbers.

I've found that the underlying generated randoms do have enough precision to add to 100%, so I am fairly sure this is a rounding issue.

I am playing with a possible fix, but am fairly new to ObjC so still working it out. I've been looking in updateLabelForLayer and think that an appropriate rounding function may do the trick. Though I've tried a few solutions with NumberFormatters and not yet been able to get the required behaviour. So perhaps a little more subtle than it looks.

I very much hope I am not missing anything really obvious here. Apologies if I am. Or if it's designed functionality then fair enough. For my app, though, I need things to always add up to 100%. Happy to send my solution attempts thus far if that's any help. I've consulted a friend who's an expert on floating point issues, so perhaps may see a solution that way. Happy to share either way.

Once again, great looking component.

Thanks,

Paul

Not all pie's in the pie-chart are clickable.

Not sure if this is an issue but i notice that if i have a pie chart with 4 pie's than the pie with index 0 and 3 can be clicked.

Version numbers

Hi,

could you start occasionally tagging version numbers (at least 0.1, 0.2, etc.)? The version in Cocoapods is pretty old, but I can't update the spec without official version numbers.

Doesn't work when using UIModalTransitionStyleFlipHorizontal

I'm using the below code to present my view with the chart

UIViewController *view = [self.storyboard instantiateViewControllerWithIdentifier:@"matrixViewController"];
view.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
[self presentViewController:view animated:YES completion:nil];

it works perfectly, but when I change de modalTransitionStyle to UIModalTransitionStyleFlipHorizontal the chart doesn't work. Don't show any slice.

Any suggestion/help would be much appreciated.

Thanks,
Geovanne Duarte

Can't select segments of PieChart shown in UITableViewCell

I'm initialising an XYPieChart inside "cellForRowAtIndexPath", and I have a property for the Pie Chart in the viewController that contains the UITableView (and is also its DataSource and Delegate).

The viewController is the Pie Chart's delegate, and is adhering to its protocol correctly - the chart itself is displaying perfectly. The chart, table cell, table and containing view all have user interaction enabled.

However, neither the didSelect, or willSelectSliceAtIndex methods are ever performed. Has anyone had any similar experience of this?

[Feature] Add labelForSliceAtIndex method to XYPieChartDataSource

Hey!

I played with your component and i have to say nice work so far.
The only thing that miss in this component is the ability to add texts on each slice.

Cheers,
I.

Removing a Slice not beautiful

Now when I need to remove a slice I got a short duration for white before the slice behind the removed slice run to the place.

So I should make a progress for this issue! :P

Add '%' to the percentage label if required

at [updateLabelForLayer:(SliceLayer _)pieLayer value:(CGFloat)value]
if "_showPercentage==TRUE" you can show the percentage symbol, hence change
label = [NSString stringWithFormat:@"%0.0f", pieLayer.percentage_100];
to
label = [NSString stringWithFormat:@"%%%0.0f", pieLayer.percentage*100];

cheers,
I.

Set a color to a slice : impossible?

@xyfeng Hello and thanks for your project.
I made it work within my project, but I have a problem setting a colour to a slice.
It seems impossible to set a custom colour to a slice. In my case, I am dealing with 2 slices only, but no matter what I try to do, the colours are always 2 shades of red, lighter and darker. I tried with @synthesize pieChart = _pieChart; and then with @synthesize pieChart = _pieChartCopy; but it nothing changed even when I change the array slice colours:

self.sliceColors =[NSArray arrayWithObjects:
                       [UIColor colorWithRed:229/255.0 green:66/255.0 blue:115/255.0 alpha:1],
                       [UIColor colorWithRed:148/255.0 green:141/255.0 blue:139/255.0 alpha:1],
                       //[UIColor colorWithRed:50/255.0 green:205/255.0 blue:50/255.0 alpha:1],
                       //[UIColor colorWithRed:220/255.0 green:20/255.0 blue:60/255.0 alpha:1],
                       nil];

Please consider my issue and I am looking forward to a response from you. Thanks in advance.

XYPieChart 2 Slices Selection

Hi,

I have a pie chart with two slices, the problem is when we have a slice that is already selected and we would select another slice, the first one doesn't deselected with animation such a pie chart with 3 slices or more.

Thanks in advance,
Zouhir.

Pie Chart Being Selective

This is really weird, but I've checked my code a million times. For some reason when in a certain view, no slices are showing up. I have no idea what i am doing or why it won't work. Im sorry that this is so vague, but it is the weirdest thing and I cannot describe it other than by saying its being selective in which view it is shown.

How to manually trigger pie chart animation?

Please can you tell me how to go about manually triggering the pie chart animation.

Thanks

Reload data without animation

I din't find way to do it. Is it possible?

pieChart:textForSliceAtIndex is not called

Hi,

I'm having an issue where pieChart:textForSliceAtIndex is not called. In my code, I created the pie chart programmatically and assigned delegate and dataSource but the method was not called. 'valueForSliceAtIndex' and 'colorForSliceAtIndex' were called though.

Here's my code (I'm using RubyMotion btw)

view = UIView.alloc.initWithFrame(self.view.bounds)
view.backgroundColor = UIColor.whiteColor
view.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight

@pieChart = XYPieChart.alloc.initWithFrame([[340, 100], [400, 400]])
@pieChart.pieRadius = 200
@pieChart.delegate = self
@pieChart.dataSource = self
view.addSubview(@pieChart)

self.view.addSubview(view)

Thanks.

Pie segments don't give 100% in sum

Here is my case for example : http://monosnap.com/image/OQJ2hNbDQTa21R31lbUnla4eFdSQrs.png
there are 3 values: 123, 20, 18.
their percentage values are 76, 11, 12 which sum gives us 99, which is not correct

sizeWithFont deprecated

Change:
[label sizeWithFont:self.labelFont]
To:
[label sizeWithAttributes:
@{NSFontAttributeName:
self.labelFont}];

Rotate Pie Chart Slice on Clicking

Hi,
First of all I'd like to thank you for writing such useful Pie Chart Application.
Indeed you did a well job.
I have used this sample application in my iOS Application.
I have done everything successfully beside one thing.

Actually i want to rotate particular slice on clicking it and remaining slices would rotate according to that clicked slice.

suppose in my pie chart there are 5 slices.

As i click on slice number2 , then number2 would move to the specific position and number 1 would take the place of number 2 , number 5 slice would take the position of slice number 1 and remaining slice would take position accordingly.

I have tried to achieve this by resetting the start and end angle of each layer , but no luck .

Please help me in rotating the slice on click.
please provide me some idea.

Any suggestion/help would be much appreciated.

Thanks,
Mohd Kamarshad

Right pie chart should show the sum of slices at the centre.

Right pie chart should show the sum of slices at the centre. It should update the label on various activities.

How to draw pie chart (pieChartLeft) without animation

Hi,

Can u please suggest me how to draw pie chart (pieChartLeft) without animation.

crashes in XCode Objective-C - memory mgmt issue

How to fix memory crashing. Basically you must tweak XYPieChart to support ARC, the memory manager in XCode. Here are the details:

http://www.brettcolbert.me/2013/06/fixing-xypiechart-crashing-in-xcode.html

Interface Builder Live Rendering

Is it possible to add IBDesignable to your PieChart View so that we can see a live preview of the chart in interface builder?

Is this pie chart could be used in iphone platform

add this piechart pod for iphone using ,and build the project.There is the error "Error:linker command failed with exit code 1 (use -v to see invocation)"

is there any ways for using in iphone platform?

PieChart appears very tiny when it used with storyboard

PieChart appears very tiny when it used with storyboard !!!

Applying transform to SliceLayers does not working.

I wanted to customise display style for selected slices in a chart.

I applied scale transform, but it's not working as expected by default.

What I see is that bounds of SliceLayers are CGRectZero, so setting anchor point on layer does not help.

I've managed to get the animation that I want by setting bounds and position values of SliceLayer objects accordingly, then applying scale transform.

I think it would be appropriate to set bounds for SliceLayer s in reloadData method. What do you think? If it's ok, I could implement and send a pull request..

Besides that, I propose to implement an interface which enables users to customise selected/deselected slice animation behaviours. Currently, you are applying a translation to position property of layers. However, it could be any generic CATransform3D struct, therefore the library will have a much more flexible interface.

Maybe we can define two public CATransform3D properties like this:

@Property (nonatomic, assign) CATransform3D selectedSliceTransform;
@Property (nonatomic, assign) CATransform3D deselectedSliceTransform;

I'm open to suggestions..

By the way, thanks for the great library!

How to set Custom Text to Label?

I'm doing a project where i set time in milliseconds for piechart slice and i need to show the same time in "hh:mm:ss" format. Can you help how to set custom text to Label?

Getting warnings when updating to iOS 9. "Incompatible pointer types initializing 'CATextLayer..."

Incompatible pointer types initializing 'CATextLayer *' with an expression of type 'CALayer * _Nullable'.

Just need casting to (CATextLayer *) or (SliceLayer *)

Open Slice with Single Touch

It seems that I have to touch the slice two times for it to open. I guess it is because of the animation which attaches the other slice back to the pie chart. Any solution to this problem? It would be nice that if I touch a slice and all the other slices goes back to the piechart and the touched slice opens up instantly.

Label placement

Is it possible to change the placement of the label that is inside the pie chart slice. I want to put it outside of it, just next to the slice. Like this. ?

Update CocoaPods

Would you mind updating CocoaPods with the latest version of your code?

Your current spec is fixed on tag v0.1 and therefore doesn't include the XCode 5 fix you made a few months ago.

Adding an XYPieChart without Interface Builder

I might be missing something here but I can't seem to add a chart without using interfact builder. I've tried

[self.view addSubview:_chart];

but to no avail. Also tried looking for a subview in the _chart object that I could use but again no luck.

Expanding a particular slice

I am trying to create a piechart where I can drill down a slice, by animating a selected slice to expand while deleting the other slices. Could you add such a functionality?

Found your code easier to understand and work with than BTSPieChart. Thanks.

Anyone converting this library from ObjC to swift?

Having problem in converting two syntax

Issue 1: Well am unable to figure out how to convert the below line to swift
[listener respondsToSelector:@selector(pieChart:colorForSliceAtIndex:)]
This is where i reached
let selector: Selector = Selector("pieChart:colorForSliceAtIndex:")
respondsToSelector(selecting)
Issue 2: UIFont to CGFont

Add separate UILabel for slice label

It would be nice if there were 2 labels per slice, 1 for percentage and 1 for the actual label text. The percent label would go under the text label (like you see in Microsoft Excel charts)

or maybe make the 1 label that is there multiline so you could say something like label text = @"MyLabel\n60%"

either solution would work!

PieChart is not animating when I added it from Storyboard

Hi;

My setup is:

[self.pieChart setPieRadius:100.0];
[self.pieChart setDelegate:self];
[self.pieChart setDataSource:self];
[self.pieChart setStartPieAngle:M_PI_2];    //optional
[self.pieChart setAnimationSpeed:1.0];  //optional
[self.pieChart setLabelFont:[UIFont fontWithName:@"HelveticaNeue-Bold" size:14.0f]];    //optional
[self.pieChart setLabelColor:[UIColor blackColor]]; //optional, defaults to white
[self.pieChart setLabelRadius:110]; //optional
[self.pieChart setShowPercentage:YES];  //optional
[self.pieChart setPieBackgroundColor:[UIColor colorWithWhite:0.95 alpha:1]];    //optional   

And when it comes to 3rd section of my table view,

if([indexPath isEqual:[NSIndexPath indexPathForRow:0 inSection:3]]){
    [self.pieChart reloadData];
}

I see that it is not animating. Sometimes chart is not drawn. Is my setup wrong?