sakrist / vbpiechart

🍰📈 Pie Chart iOS control with different animations to present.

VBPieChart

Animated Pie Chart control for iOS apps, based on CALayer. Very easy in use and have custom labeling.

Usage

Create simple pi chart with VBPieChart:

VBPieChart *chart = [[VBPieChart alloc] initWithFrame:CGRectMake(10, 50, 300, 300)];
[self.view addSubview:chart];

// Setup some options:
[chart setEnableStrokeColor:YES]; 
[chart setHoleRadiusPrecent:0.3]; /* hole inside of chart */

// Prepare your data
NSArray *chartValues = @[
 @{@"name":@"Apples", @"value":@50, @"color":[UIColor redColor]},
 @{@"name":@"Pears", @"value":@20, @"color":[UIColor blueColor]},
 @{@"name":@"Oranges", @"value":@40, @"color":[UIColor orangeColor]},
 @{@"name":@"Bananas", @"value":@70, @"color":[UIColor purpleColor]}
];

// Present pie chart with animation
[chart setChartValues:chartValues animation:YES duration:0.4 options:VBPieChartAnimationFan];

chartValues needs to be defined as an array of dictionaries.
Dictionary required to contain value for piece with key value.
Optional:

• name
• color
• labelColor
• accent
• strokeColor

Chart from JSON

VBPieChart *chart = [[VBPieChart alloc] initWithFrame:CGRectMake(10, 50, 300, 300)];
chart.startAngle = M_PI+M_PI_2;
chart.holeRadiusPrecent = 0.5;
[self.view addSubview:chart];
NSString *json_example = @"[ {\"name\":\"first\", \"value\":\"50\", \"color\":\"#84C69B\", \"strokeColor\":\"#fff\"}, \
{\"name\":\"second\", \"value\":\"60\", \"color\":\"#FECEA8\", \"strokeColor\":\"#fff\"}, \
{\"name\":\"second\", \"value\":\"75\", \"color\":\"#F7EEBB\", \"strokeColor\":\"#fff\"}, \
{\"name\":\"second\", \"value\":\"90\", \"color\":\"#D7C1E0\", \"strokeColor\":\"#fff\"} ]";

NSData *data = [json_example dataUsingEncoding:NSUTF8StringEncoding];
NSArray *chartValues = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];

[chart setChartValues:chartValues animation:YES duration:0.5 options:VBPieChartAnimationFan];

Chart with custom label position

VBPieChart *chart = [[VBPieChart alloc] initWithFrame:CGRectMake(10, 50, 300, 300)];
chart.startAngle = M_PI+M_PI_2;
chart.holeRadiusPrecent = 0.5;
[self.view addSubview:chart];
[chart setLabelsPosition:VBLabelsPositionCustom];
[chart setLabelBlock:^CGPoint( CALayer *layer, NSInteger index) {
    CGPoint p = CGPointMake(sin(-index/10.0*M_PI)*50+50, index*30);
    return p;
}];

[chart setChartValues:@[
                         @{@"name":@"37%", @"value":@65, @"color":@"#5677fcaa", @"labelColor":@"#000"},
                         @{@"name":@"13%", @"value":@23, @"color":@"#2baf2baa", @"labelColor":@"#000"},
                         @{@"name":@"19.3%", @"value":@34, @"color":@"#b0bec5aa", @"labelColor":@"#000"},
                         @{@"name":@"30.7%", @"value":@54, @"color":@"#f57c00aa", @"labelColor":@"#000"}
                         ]
             animation:YES];

Basic Documentation

VBPieChart is subclass of UIView.

Properties

length
Length of circle pie. Min values is 0 and max value 2*M_PI.

startAngle
Start angle of pie. (M_PI will make start at left side)

holeRadiusPrecent
hole radius in % of whole radius. Values 0..1. (acual hole radius will be calculated radius*holeRadiusPrecent)

radiusPrecent
Defines the radius, full radius = frame.size.width/2, actual radius = full radius*radiusPrecent. Value 0..1.

labelBlock
Block will help to redefine positions for labels.

Methods

Get all changed chart values back.
- (NSArray *) chartValues;

Simple setup data.
- (void) setChartValues:(NSArray *)chartValues;

Setup data to pie chart with animation or not, animation options and duration.
- (void) setChartValues:(NSArray *)chartValues animation:(BOOL)animation duration:(float)duration options:(VBPieChartAnimationOptions)options;

Animation options:

• VBPieChartAnimationFanAll
• VBPieChartAnimationGrowth
• VBPieChartAnimationGrowthAll
• VBPieChartAnimationGrowthBack
• VBPieChartAnimationGrowthBackAll
• VBPieChartAnimationFan
• VBPieChartAnimationTimingEaseInOut
• VBPieChartAnimationTimingEaseIn
• VBPieChartAnimationTimingEaseOut
• VBPieChartAnimationTimingLinear

Change value for elemet at index. Value will be changed with animation.
- (void) setValue:(NSNumber*)value pieceAtIndex:(NSInteger)index;

Insert new piece at index. Animated. - (void) insertChartValue:(NSDictionary*)chartValue atIndex:(NSInteger)index;

Remove piece at index.
- (void) removePieceAtIndex:(NSInteger)index;

Supported with ad:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

vbpiechart's Issues

Reset pieChart

StartAngle Change causes slice to go out in Wrong directions.

Hi,

Thanks for the updated version. Everything is working fine in the latest version except when we change the start angle property from ZERO to some other value. The slices of pie chart comes out in wrong direction on selection.Any suggestion how can I fix this?

Thanks

getting such output using VBPieChart ??

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

Feature Request: Text Labels on pie pieces.

I have tried to manually add this feature to your library, I used CATextLayer - and it was somewhat successful. Everything works great until I need to animate movement. How do I sync movement of text layer with pie piece?
Here is the code of my improved version of your pie piece:
https://gist.github.com/Voley/c84453b9d88ad5b20672

VBPiePiece font warning

sizeWithFont is deprecated, have you tried using sizeWithAttributes ?

Creating VBPiechart by using Auto layout

When I am trying to create a pie chart by using auto layouts it is not showing any values only empty it is showing.
the following attachment shows the error screen. I am adding pie chart as a subview of the UITableviewHeaderFooterView. Can you please tell me how to fix this issue.

Question:How to set corner radius to the pie piece?

I have read the codes and docs of apple site,but I am still confuse which properties or method should I config to add corner radius effect to the pie piece like following picture,Could you help me ?

Thanks

Fill Pie with color!

Is there is any way to set fill color percent ?

like if I want 50% of the pie to be fill with color ?

@sakrist ?

setChartValue with array or dictionary?

Why in old versions you use a NSArray into method setChartValue and in the newer version you use a NSDictionary?

how can we use the new method with an array with this format?
self.chartValues = @[
@{@"name":@"first", @"value":@50, @"color":[UIColor redColor]},
@{@"name":@"third", @"value":@40, @"color":[UIColor orangeColor]},
@{@"name":@"fourth 2", @"value":@70, @"color":[UIColor yellowColor]},
@{@"name":@"fourth 3", @"value":@65, @"color":[UIColor greenColor]},
@{@"name":@"fourth 6", @"value":@54, @"color":[UIColor blueColor]}
];

and wich is the right format of the dictionary that I need?

Thank you

VBPieChart not add on UIView objective c

hi,
I am creating a uiview in nib and setting uiview parent class 'vbpiechart' and set all the thing copy from tutorial but the chart doesn't appear, and when i add chart to self.view it works fine, why this behavior.

How to set values in swift2.0

viewPieChart = [["name": "first", "value": 50.00, "color": UIColor.redColor()], ["name": "sec", "value": 50.00, "color": UIColor.blackColor()]]

How to custom selected pie at any index?

Thanks for your great chart!
Now, I want to set a selected pie like the attached image.
How can I do this?
Thanks in advance!.

Is it possible to make the segments have different length?

Hi there, I wonder if it would be possible to draw the segments each with a different length. So it comes spike outside rather than being the same radius. Your animation actually already does it, so I guess it just would have to be adopted a bit?

Thick border between two slices

Change font color not working for slices text

Delete button on slices to delete slice

Make VBPiePiece public

Make VBPiePiece public.
And be able to create instance of it and insert into array, and use it for init the VBPieChart.

VBPiePiece
angle - should be editable and animatable
startAngle - should be editable and animatable

then those methods should be deprecated in VBPieChart
- (void) setValue:(NSNumber*)value pieceAtIndex:(NSInteger)index;
- (void) setValues:(NSDictionary*)values;

Is there a way to force order in ChartValues?

I have the following chart order:
NSDictionary *chartValues = @{
@"1": @{@"value":@0.3, @"color":G_COLOR_BLUE},
@"2": @{@"value":@0.3, @"color":G_COLOR_BROWN},
@"3": @{@"value":@0.3, @"color":G_COLOR_PURPLE},
@"4": @{@"value":@0.1, @"color":G_COLOR_GRAY}
};

But they are shown on the chart in 2, 3, 1, 4 order.
I understand that this happens due to unordered array of keys that is getting returned from NSDictionary. Is there a way around this?

I'm trying to add labels to the chart and calculating positions goes through the roof if the elements are in random order.

Can we create same sample for stacked Barchart with same animation?

I want to use same animation in stacked bar chart to show rising animations for each stacked bar using CAShapeLayer.

Thanks,
Shankar

Terminating since there is no system app

Hi there! I like the ease of this chart, but unfortunately I'm getting strange error on iPhone 6 (both simulator and the device) when I'm trying to scroll a UIScrollView/UITableView with the VBPieChart inside. I'm getting this weird Terminating since there is no system app error and can't find the cause. Did anyone seen this? Does anyone know how to fix it?

Steps to repoduce

Run pod try VBPieChart, open the swift demo, and replace ViewCotroller.swift with this contents:

import UIKit

class ViewController: UIViewController {

    let scrollView = UIScrollView()
    let chart = VBPieChart()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.addSubview(scrollView)
        scrollView.frame = self.view.bounds
        scrollView.alwaysBounceVertical = true

        self.scrollView.addSubview(chart);

        chart.frame = CGRectMake(200, 50, 293, 256);
        chart.enableStrokeColor = true;
        chart.holeRadiusPrecent = 0.85;
        chart.enableInteractive = false
        chart.startAngle = Float(3*M_PI_2)

        let chartValues = map(1...42) {(_) in return ["value": 1, "color":UIColor(hexString:"dd191daa")] }
        chart.setChartValues(chartValues, animation:true)

    }

}

Then just grad the screen down and here the error. It does not fire any exception (I have a breakpoint for all exceptions enabled), it seems not like the memory overflow (profiler gives no hints also). Here is the gif also:

Highlight slice piece programmatically

I would like to be able to highlight the largest slice piece programmatically like it can be done when the user taps a piece. It would of course be best to make a general highlightSlice method with an index parameter so all pieces can be highlighted.

I have tried to fork the project, and added the following code.

// Finds the largest piece in the chart and changes its accent
- (void) highlightLargestPiece {
    VBPiePiece *largestPiece = nil;

    for (VBPiePiece *piece in _piecesArray) {
        if (largestPiece == nil || (largestPiece.data.value.doubleValue < piece.data.value.doubleValue)) {
            largestPiece = piece;
        }
    }

    if (largestPiece != nil) {
        [self togglePieceAccent:largestPiece];
    }
}

- (void) togglePieceAccent:(VBPiePiece *)piece {
    if (piece.accentPrecent < FLT_EPSILON) {
        [piece animateToAccent:_maxAccentPrecent];
    } else {
        [piece animateToAccent:0];
    }

Then i made the highlightLargestPiece public, but i somehow cannot call it from Swift - i get an unrecognized selector error, even though the code compiles.
The compiler is somehow recognizing the new method, but during runtime it apparently doesn't exist.

Does someone know what is wrong?

There is a problem for touchEvent when I set startAngle to M_PI

When I set startAngle to M_PI, the direction of the chart's animation is wrong

If long names in slice of pie chart then it hides the half name

Is it possible to show full names in slices of pie chart ?

Can we automatically adjust font size as per the name length so it can display full name ?

starting angle change

need initial look like 50% left 50% right instead on top bottom

Multi-level pie chart

How to draw multi-level pie charts iOS. @ReDetection @sakrist @danydev

What if i want to add some UIView in Hole ?

HI,
Is it possible to add UIView in Hole..as i want to add One image in Hole space and want to keep it's user interaction enable.

can you help with it ?

ViewController退出闪退问题

初始化方法：

• (id) init {
  self = [super init];
  [self configure];
  return self;
  }
  应该改为：
• (id) init {
  self = [self initWithFrame:CGRectZero];
  // [self configure];
  return self;
  }
  否则，使用[[VBPieChart alloc] init]代码进行初始化时，[self configure]方法可能会调用两次，导致对象释放时出现异常而闪退。

Can i able to fill one section with dotted pattern.

Hi,
I want to fill one section with dotted pattern keeping its background color as it is. Just want to add dotted pattern. Is it possible?

Also attaching image what exactly i want to achieve.

Appreciate your help on this!
Thanks,
Shankar

Labels?

Hi, very good piece of code indeed, thanks. Are there any plans to add label support in the near future?

Implement example for overwritten VBPiePiece...

Implement example with overwritten refreshPath in VBPiePiece.
Which will show that this code can represent different type of charts, not only pie chart.

Will be possible only after #25 .

removeFromSubview not working

Hi,

I want to hide/remove the pie chart on a button click.
Removing from self.view doesn't seem to work.

Please suggest some solution.

Regards.

Is there a way to just have the pie slice size change without "re-fanning" the whole graph?

I'd just like the slices to adjust size without the graph rebuilding each time it changes.

How to start drawing pie chart from 12 o Clock marker, right now its starting drawing from 3 o clock marker

What angel need to be change to start drawing from 12 o clock marker of circular clock?