KATCircularProgressChart

On HUD => https://github.com/TharinduKetipe/KATCircularProgressChart

• Features
• Example
• Requirements
• Installation
• Usage
• Strength
• Author
• License

Features

• Circular Progress Chart with animation.
• Bar thickness can be customized.
• Animation duration can be customized.
• Also can be used as a Pie Chart by increasing the bar thickness.

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

or appetize.io

Requirements

• iOS 8.0+
• Xcode 8.0+

Installation

KATCircularProgressChart is available through CocoaPods.

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. You can install it with the following command:

$ gem install cocoapods

After the CocoaPod installation , To install KATCircularProgressChart simply add the following line to your Podfile:

pod 'KATCircularProgressChart'

or

pod 'KATCircularProgressChart', '1.0.0'

Then, run the following command:

$ pod install

Manually

If you prefer not to use either of the aforementioned dependency managers, you can integrate KATCircularProgressChart into your project manually. Just need to add "KATCircularProgress.h" and "KATCircularProgress.h" files to your project.

Usage

First import "KATCircularProgress.h" file to your ViewController.

#import "KATCircularProgress.h"

Then create a UIView from the storyboard which contains the same width and height. Then make an outlet to your ViewController.

#import "ViewController.h"
#import "KATCircularProgress.h"

@interface ViewController () {

}

@property (strong, nonatomic) IBOutlet KATCircularProgress *ProgressChart;

@end

Each entry you need to add as a SliceItem object which contains itemValue (float) and ItemColor (UIColor).Create few slice items like this.

SliceItem *item1 = [[SliceItem alloc] init];
item1.itemValue = 50.0; // value should be a float value
item1.itemColor = [UIColor blueColor]; // color should be a UIColor value

SliceItem *item2 = [[SliceItem alloc] init];
item2.itemValue = 100.0;
item2.itemColor = [UIColor greenColor];

SliceItem *item3 = [[SliceItem alloc] init];
item3.itemValue = 150.0;
item3.itemColor = [UIColor yellowColor];

Then add these objects to sliceItems array which is property of your KATCircularProgress.

[self.ProgressChart.sliceItems addObject:item1];
[self.ProgressChart.sliceItems addObject:item2];
[self.ProgressChart.sliceItems addObject:item3];

When you are using this chart again and again (Like in a list view) Please make sure clear the array before adding the new items.

[self.ProgressChart.sliceItems removeAllObjects];

Finaly reload the progress chart.

[self.ProgressChart reloadData];

Here is the full code snippet.

#import "ViewController.h"
#import "KATCircularProgress.h"

@interface ViewController ()

@property (strong, nonatomic) IBOutlet KATCircularProgress *progressChart;

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];

SliceItem *item1 = [SliceItem new];
item1.itemValue = 25.0;
item1.itemColor = [UIColor greenColor];

SliceItem *item2 = [SliceItem new];
item2.itemValue = 35.0;
item2.itemColor = [UIColor yellowColor];

SliceItem *item3 = [SliceItem new];
item3.itemValue = 125.0;
item3.itemColor = [UIColor orangeColor];

SliceItem *item4 = [SliceItem new];
item4.itemValue = 75.0;
item4.itemColor = [UIColor blueColor];

[self.ProgressChart.sliceItems removeAllObjects];

[self.progressChart.sliceItems addObject:item1];
[self.progressChart.sliceItems addObject:item2];
[self.progressChart.sliceItems addObject:item3];
[self.progressChart.sliceItems addObject:item4];

[self.progressChart reloadData];

}

@end

For more information please refer the example project. It contains more details about how to use this pod with UITableView for the list populations.

Customization

You can change the bar thickness of the chart as you want.

[self.ProgressChart setLineWidth:30.0];

Also you can adjust the animation duration as well.

[self.ProgressChart setAnimationDuration:2.5];

Strength

This is really simple chart you can build lot more complex animations upon this. We are guranteed this comes with high performace without UI lagging or any performace issues.

Author

Tharindu Ketipearachchi, katramesh91@gmail.com

linkedIn

License

KATCircularProgressChart is available under the MIT license. See the LICENSE file for more info.