Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kevinzhow/PNChart

A simple and beautiful chart lib used in Piner and CoinsMan for iOS
https://github.com/kevinzhow/PNChart

Last synced: 26 days ago
JSON representation

A simple and beautiful chart lib used in Piner and CoinsMan for iOS

Awesome Lists containing this project

README 

        
# PNChart



[![Build Status](https://travis-ci.org/kevinzhow/PNChart.png?branch=master)](https://travis-ci.org/kevinzhow/PNChart)



You can also find swift version at here https://github.com/kevinzhow/PNChart-Swift



A simple and beautiful chart lib with **animation** used in [Piner](https://itunes.apple.com/us/app/piner/id637706410) and [CoinsMan](https://itunes.apple.com/us/app/coinsman/id772163893) for iOS



[![](https://s3.amazonaws.com/farshid.ghods.github/pnchart-gif.gif)](https://s3.amazonaws.com/farshid.ghods.github/pnchart-gif.gif)



## Requirements



PNChart works on iOS 7.0+ and is compatible with ARC projects.

If you need support for iOS 6, use PNChart <= 0.8.1. Note that 0.8.2 supports iOS 8.0+ only, 0.8.3 and newer supports iOS 7.0+.



It depends on the following Apple frameworks, which should already be included with most Xcode templates:



* Foundation.framework

* UIKit.framework

* CoreGraphics.framework

* QuartzCore.framework



You will need LLVM 3.0 or later in order to build PNChart.



## Usage



### Cocoapods



[CocoaPods](http://cocoapods.org) is the recommended way to add PNChart to your project.



1. Add a pod entry for PNChart to your Podfile `pod 'PNChart'`

2. Install the pod(s) by running `pod install`.

3. Include PNChart wherever you need it with `#import "PNChart.h"`.



### Copy the PNChart folder to your project



```objective-c

#import "PNChart.h"



//For Line Chart

PNLineChart * lineChart = [[PNLineChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];

[lineChart setXLabels:@[@"SEP 1",@"SEP 2",@"SEP 3",@"SEP 4",@"SEP 5"]];



// Line Chart No.1

NSArray * data01Array = @[@60.1, @160.1, @126.4, @262.2, @186.2];

PNLineChartData *data01 = [PNLineChartData new];

data01.color = PNFreshGreen;

data01.itemCount = lineChart.xLabels.count;

data01.getData = ^(NSUInteger index) {

    CGFloat yValue = [data01Array[index] floatValue];

    return [PNLineChartDataItem dataItemWithY:yValue];

};

// Line Chart No.2

NSArray * data02Array = @[@20.1, @180.1, @26.4, @202.2, @126.2];

PNLineChartData *data02 = [PNLineChartData new];

data02.color = PNTwitterColor;

data02.itemCount = lineChart.xLabels.count;

data02.getData = ^(NSUInteger index) {

    CGFloat yValue = [data02Array[index] floatValue];

    return [PNLineChartDataItem dataItemWithY:yValue];

};



lineChart.chartData = @[data01, data02];

[lineChart strokeChart];

```



You can choose to show smooth lines.



```objective-c

lineChart.showSmoothLines = YES;

```



[![](https://s3.amazonaws.com/farshid.ghods.github/pnchart-linechart-smooth.png)](https://s3.amazonaws.com/farshid.ghods.github/pnchart-linechart-smooth.png)



You can set different colors for the same PNLineChartData item. for instance you can use "color" red for values less than 50 and use purple for values greater than 150.



[![](https://s3.amazonaws.com/farshid.ghods.github/pnchart-rangecolors-2.png)](https://s3.amazonaws.com/farshid.ghods.github/pnchart-rangecolors-2.png)



```objective-c

lineChartData.rangeColors = @[

        [[PNLineChartColorRange alloc] initWithRange:NSMakeRange(10, 30) color:[UIColor redColor]],

        [[PNLineChartColorRange alloc] initWithRange:NSMakeRange(100, 200) color:[UIColor purpleColor]]

];

```



```objective-c

#import "PNChart.h"



//For BarC hart

PNBarChart * barChart = [[PNBarChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];

[barChart setXLabels:@[@"SEP 1",@"SEP 2",@"SEP 3",@"SEP 4",@"SEP 5"]];

[barChart setYValues:@[@1,  @10, @2, @6, @3]];

[barChart strokeChart];



```



```objective-c

#import "PNChart.h"



//For Circle Chart



PNCircleChart * circleChart = [[PNCircleChart alloc] initWithFrame:CGRectMake(0, 80.0, SCREEN_WIDTH, 100.0) total:[NSNumber numberWithInt:100] current:[NSNumber numberWithInt:60] clockwise:NO shadow:NO];

circleChart.backgroundColor = [UIColor clearColor];

[circleChart setStrokeColor:PNGreen];

[circleChart strokeChart];



```



```objective-c

# import "PNChart.h"

//For Pie Chart

NSArray *items = @[[PNPieChartDataItem dataItemWithValue:10 color:PNRed],

                           [PNPieChartDataItem dataItemWithValue:20 color:PNBlue description:@"WWDC"],

                           [PNPieChartDataItem dataItemWithValue:40 color:PNGreen description:@"GOOL I/O"],

                           ];



PNPieChart *pieChart = [[PNPieChart alloc] initWithFrame:CGRectMake(40.0, 155.0, 240.0, 240.0) items:items];

pieChart.descriptionTextColor = [UIColor whiteColor];

pieChart.descriptionTextFont  = [UIFont fontWithName:@"Avenir-Medium" size:14.0];

[pieChart strokeChart];

```



```objective-c

# import "PNChart.h"

//For Scatter Chart



PNScatterChart *scatterChart = [[PNScatterChart alloc] initWithFrame:CGRectMake(SCREEN_WIDTH /6.0 - 30, 135, 280, 200)];

[scatterChart setAxisXWithMinimumValue:20 andMaxValue:100 toTicks:6];

[scatterChart setAxisYWithMinimumValue:30 andMaxValue:50 toTicks:5];



NSArray * data01Array = [self randomSetOfObjects];

PNScatterChartData *data01 = [PNScatterChartData new];

data01.strokeColor = PNGreen;

data01.fillColor = PNFreshGreen;

data01.size = 2;

data01.itemCount = [[data01Array objectAtIndex:0] count];

data01.inflexionPointStyle = PNScatterChartPointStyleCircle;

__block NSMutableArray *XAr1 = [NSMutableArray arrayWithArray:[data01Array objectAtIndex:0]];

__block NSMutableArray *YAr1 = [NSMutableArray arrayWithArray:[data01Array objectAtIndex:1]];

data01.getData = ^(NSUInteger index) {

    CGFloat xValue = [[XAr1 objectAtIndex:index] floatValue];

    CGFloat yValue = [[YAr1 objectAtIndex:index] floatValue];

    return [PNScatterChartDataItem dataItemWithX:xValue AndWithY:yValue];

};



[scatterChart setup];

self.scatterChart.chartData = @[data01];

/***

this is for drawing line to compare

CGPoint start = CGPointMake(20, 35);

CGPoint end = CGPointMake(80, 45);

[scatterChart drawLineFromPoint:start ToPoint:end WithLineWith:2 AndWithColor:PNBlack];

***/

scatterChart.delegate = self;

```



#### Legend



Legend has been added to PNChart for Line and Pie Charts. Legend items position can be stacked or in series.



```objective-c

#import "PNChart.h"



//For Line Chart



//Add Line Titles for the Legend

data01.dataTitle = @"Alpha";

data02.dataTitle = @"Beta Beta Beta Beta";



//Build the legend

self.lineChart.legendStyle = PNLegendItemStyleSerial;

UIView *legend = [self.lineChart getLegendWithMaxWidth:320];



//Move legend to the desired position and add to view

[legend setFrame:CGRectMake(100, 400, legend.frame.size.width, legend.frame.size.height)];

[self.view addSubview:legend];



//For Pie Chart



//Build the legend

self.pieChart.legendStyle = PNLegendItemStyleStacked;

UIView *legend = [self.pieChart getLegendWithMaxWidth:200];



//Move legend to the desired position and add to view

[legend setFrame:CGRectMake(130, 350, legend.frame.size.width, legend.frame.size.height)];

[self.view addSubview:legend];

```



#### Grid Lines



Grid lines have been added to PNChart for Line Chart.



```objective-c

lineChart.showYGridLines = YES;

lineChart.yGridLinesColor = [UIColor grayColor];

```



[![](https://s3.amazonaws.com/farshid.ghods.github/pnchart-gridline.png)](https://s3.amazonaws.com/farshid.ghods.github/pnchart-gridline.png)



#### Update Value



Now it's easy to update value in real time



```objective-c

if ([self.title isEqualToString:@"Line Chart"]) {



    // Line Chart #1

    NSArray * data01Array = @[@(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300)];

    PNLineChartData *data01 = [PNLineChartData new];

    data01.color = PNFreshGreen;

    data01.itemCount = data01Array.count;

    data01.inflexionPointStyle = PNLineChartPointStyleTriangle;

    data01.getData = ^(NSUInteger index) {

        CGFloat yValue = [data01Array[index] floatValue];

        return [PNLineChartDataItem dataItemWithY:yValue];

    };



    // Line Chart #2

    NSArray * data02Array = @[@(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300), @(arc4random() % 300)];

    PNLineChartData *data02 = [PNLineChartData new];

    data02.color = PNTwitterColor;

    data02.itemCount = data02Array.count;

    data02.inflexionPointStyle = PNLineChartPointStyleSquare;

    data02.getData = ^(NSUInteger index) {

        CGFloat yValue = [data02Array[index] floatValue];

        return [PNLineChartDataItem dataItemWithY:yValue];

    };



    [self.lineChart setXLabels:@[@"DEC 1",@"DEC 2",@"DEC 3",@"DEC 4",@"DEC 5",@"DEC 6",@"DEC 7"]];

    [self.lineChart updateChartData:@[data01, data02]];



}

else if ([self.title isEqualToString:@"Bar Chart"])

{

    [self.barChart setXLabels:@[@"Jan 1",@"Jan 2",@"Jan 3",@"Jan 4",@"Jan 5",@"Jan 6",@"Jan 7"]];

    [self.barChart updateChartData:@[@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30)]];

}

else if ([self.title isEqualToString:@"Circle Chart"])

{

    [self.circleChart updateChartByCurrent:@(arc4random() % 100)];

}

```



#### Callback



```objective-c

#import "PNChart.h"



//For LineChart



lineChart.delegate = self;



```



#### Animation



Animation is enabled by default when drawing all charts. It can be disabled by setting `displayAnimation = NO`.



```objective-c

#import "PNChart.h"



//For LineChart



lineChart.displayAnimation = NO;



```



```objective-c



//For DelegateMethod



-(void)userClickedOnLineKeyPoint:(CGPoint)point lineIndex:(NSInteger)lineIndex pointIndex:(NSInteger)pointIndex{

    NSLog(@"Click Key on line %f, %f line index is %d and point index is %d",point.x, point.y,(int)lineIndex, (int)pointIndex);

}



-(void)userClickedOnLinePoint:(CGPoint)point lineIndex:(NSInteger)lineIndex{

    NSLog(@"Click on line %f, %f, line index is %d",point.x, point.y, (int)lineIndex);

}



```



## License



This code is distributed under the terms and conditions of the [MIT license](LICENSE).



## SpecialThanks



[@lexrus](http://twitter.com/lexrus)  CocoaPods Spec

[ZhangHang](http://zhanghang.github.com)  Pie Chart

[MrWooj](https://github.com/MrWooJ) Scatter Chart