Github url

PNChart

by kevinzhow

kevinzhow /PNChart

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

9.7K Stars 1.8K Forks Last release: about 6 years ago (0.5) MIT License 528 Commits 34 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

PNChart

Build Status

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 and CoinsMan for iOS

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 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

#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.

lineChart.showSmoothLines = YES;

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.

lineChartData.rangeColors = @[[[PNLineChartColorRange alloc] initWithRange:NSMakeRange(10, 30) color:[UIColor redColor]], [[PNLineChartColorRange alloc] initWithRange:NSMakeRange(100, 200) color:[UIColor purpleColor]] ];
#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];
#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];
# 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];
# 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.

#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.

lineChart.showYGridLines = YES; lineChart.yGridLinesColor = [UIColor grayColor];

Update Value

Now it's easy to update value in real time

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

#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

.

#import "PNChart.h" //For LineChart lineChart.displayAnimation = NO;
//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.

SpecialThanks

@lexrus CocoaPods SpecZhangHang Pie ChartMrWooj Scatter Chart

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.