iOS / PNChart

Go to a project
Toggle navigation Toggle navigation pinning
kevin
41d1ff37 1 parent a1518081

Add Circle Chart demo

Inline Side-by-side
Showing 6 changed files with 173 additions and 19 deletions
@@ -29,6 +29,7 @@ @@ -29,6 +29,7 @@
29 0AF7A8BE182AEB99003645C4 /* PNChartLabel.m in Sources */ = {isa = PBXBuildFile; fileRef = 0AF7A8BB182AEB99003645C4 /* PNChartLabel.m */; }; 29 0AF7A8BE182AEB99003645C4 /* PNChartLabel.m in Sources */ = {isa = PBXBuildFile; fileRef = 0AF7A8BB182AEB99003645C4 /* PNChartLabel.m */; };
30 0AF7A8BF182AEB99003645C4 /* PNColor.m in Sources */ = {isa = PBXBuildFile; fileRef = 0AF7A8BD182AEB99003645C4 /* PNColor.m */; }; 30 0AF7A8BF182AEB99003645C4 /* PNColor.m in Sources */ = {isa = PBXBuildFile; fileRef = 0AF7A8BD182AEB99003645C4 /* PNColor.m */; };
31 9F55483E18498E0E004073B5 /* PNCircleChart.m in Sources */ = {isa = PBXBuildFile; fileRef = 9F55483D18498E0E004073B5 /* PNCircleChart.m */; }; 31 9F55483E18498E0E004073B5 /* PNCircleChart.m in Sources */ = {isa = PBXBuildFile; fileRef = 9F55483D18498E0E004073B5 /* PNCircleChart.m */; };
  32 + 9F656B51184A4E34002E5675 /* UICountingLabel.m in Sources */ = {isa = PBXBuildFile; fileRef = 9F656B50184A4E34002E5675 /* UICountingLabel.m */; };
32 /* End PBXBuildFile section */ 33 /* End PBXBuildFile section */
33 34
34 /* Begin PBXContainerItemProxy section */ 35 /* Begin PBXContainerItemProxy section */
@@ -76,6 +77,8 @@ @@ -76,6 +77,8 @@
76 0AF7A8BD182AEB99003645C4 /* PNColor.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = PNColor.m; path = PNChart/PNColor.m; sourceTree = "<group>"; }; 77 0AF7A8BD182AEB99003645C4 /* PNColor.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = PNColor.m; path = PNChart/PNColor.m; sourceTree = "<group>"; };
77 9F55483C18498E0E004073B5 /* PNCircleChart.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = PNCircleChart.h; path = PNChart/PNCircleChart.h; sourceTree = "<group>"; }; 78 9F55483C18498E0E004073B5 /* PNCircleChart.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = PNCircleChart.h; path = PNChart/PNCircleChart.h; sourceTree = "<group>"; };
78 9F55483D18498E0E004073B5 /* PNCircleChart.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = PNCircleChart.m; path = PNChart/PNCircleChart.m; sourceTree = "<group>"; }; 79 9F55483D18498E0E004073B5 /* PNCircleChart.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = PNCircleChart.m; path = PNChart/PNCircleChart.m; sourceTree = "<group>"; };
  80 + 9F656B4F184A4E34002E5675 /* UICountingLabel.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = UICountingLabel.h; path = PNChart/ThirdPart/UICountingLabel.h; sourceTree = "<group>"; };
  81 + 9F656B50184A4E34002E5675 /* UICountingLabel.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = UICountingLabel.m; path = PNChart/ThirdPart/UICountingLabel.m; sourceTree = "<group>"; };
79 /* End PBXFileReference section */ 82 /* End PBXFileReference section */
80 83
81 /* Begin PBXFrameworksBuildPhase section */ 84 /* Begin PBXFrameworksBuildPhase section */
@@ -180,20 +183,12 @@ @@ -180,20 +183,12 @@
180 0AF7A8A2182AAAB3003645C4 /* PNChart */ = { 183 0AF7A8A2182AAAB3003645C4 /* PNChart */ = {
181 isa = PBXGroup; 184 isa = PBXGroup;
182 children = ( 185 children = (
183 - 0AF7A8BA182AEB99003645C4 /* PNChartLabel.h */, 186 + 9F656B49184A4B90002E5675 /* PNLineChart */,
184 - 0AF7A8BB182AEB99003645C4 /* PNChartLabel.m */, 187 + 9F656B4A184A4BAC002E5675 /* PNChartUI */,
185 - 0AF7A8BC182AEB99003645C4 /* PNColor.h */,  
186 - 0AF7A8BD182AEB99003645C4 /* PNColor.m */,  
187 0AF7A89F182AAAAA003645C4 /* PNChart.h */, 188 0AF7A89F182AAAAA003645C4 /* PNChart.h */,
188 0AF7A8A0182AAAAA003645C4 /* PNChart.m */, 189 0AF7A8A0182AAAAA003645C4 /* PNChart.m */,
189 - 0AF7A8B1182AC604003645C4 /* PNLineChart.h */, 190 + 9F656B48184A4B83002E5675 /* PNBarChart */,
190 - 0AF7A8B2182AC604003645C4 /* PNLineChart.m */, 191 + 9F656B4B184A4BC9002E5675 /* PNCircleChart */,
191 - 0AF7A8B4182ADDEB003645C4 /* PNBarChart.h */,  
192 - 0AF7A8B5182ADDEB003645C4 /* PNBarChart.m */,  
193 - 0AF7A8B7182AEB80003645C4 /* PNBar.h */,  
194 - 0AF7A8B8182AEB80003645C4 /* PNBar.m */,  
195 - 9F55483C18498E0E004073B5 /* PNCircleChart.h */,  
196 - 9F55483D18498E0E004073B5 /* PNCircleChart.m */,  
197 ); 192 );
198 name = PNChart; 193 name = PNChart;
199 sourceTree = "<group>"; 194 sourceTree = "<group>";
@@ -207,6 +202,48 @@ @@ -207,6 +202,48 @@
207 name = PCChartViewController; 202 name = PCChartViewController;
208 sourceTree = "<group>"; 203 sourceTree = "<group>";
209 }; 204 };
  205 + 9F656B48184A4B83002E5675 /* PNBarChart */ = {
  206 + isa = PBXGroup;
  207 + children = (
  208 + 0AF7A8B4182ADDEB003645C4 /* PNBarChart.h */,
  209 + 0AF7A8B5182ADDEB003645C4 /* PNBarChart.m */,
  210 + 0AF7A8B7182AEB80003645C4 /* PNBar.h */,
  211 + 0AF7A8B8182AEB80003645C4 /* PNBar.m */,
  212 + );
  213 + name = PNBarChart;
  214 + sourceTree = "<group>";
  215 + };
  216 + 9F656B49184A4B90002E5675 /* PNLineChart */ = {
  217 + isa = PBXGroup;
  218 + children = (
  219 + 0AF7A8B1182AC604003645C4 /* PNLineChart.h */,
  220 + 0AF7A8B2182AC604003645C4 /* PNLineChart.m */,
  221 + );
  222 + name = PNLineChart;
  223 + sourceTree = "<group>";
  224 + };
  225 + 9F656B4A184A4BAC002E5675 /* PNChartUI */ = {
  226 + isa = PBXGroup;
  227 + children = (
  228 + 0AF7A8BA182AEB99003645C4 /* PNChartLabel.h */,
  229 + 0AF7A8BB182AEB99003645C4 /* PNChartLabel.m */,
  230 + 0AF7A8BC182AEB99003645C4 /* PNColor.h */,
  231 + 0AF7A8BD182AEB99003645C4 /* PNColor.m */,
  232 + );
  233 + name = PNChartUI;
  234 + sourceTree = "<group>";
  235 + };
  236 + 9F656B4B184A4BC9002E5675 /* PNCircleChart */ = {
  237 + isa = PBXGroup;
  238 + children = (
  239 + 9F656B4F184A4E34002E5675 /* UICountingLabel.h */,
  240 + 9F656B50184A4E34002E5675 /* UICountingLabel.m */,
  241 + 9F55483C18498E0E004073B5 /* PNCircleChart.h */,
  242 + 9F55483D18498E0E004073B5 /* PNCircleChart.m */,
  243 + );
  244 + name = PNCircleChart;
  245 + sourceTree = "<group>";
  246 + };
210 /* End PBXGroup section */ 247 /* End PBXGroup section */
211 248
212 /* Begin PBXNativeTarget section */ 249 /* Begin PBXNativeTarget section */
@@ -306,6 +343,7 @@ @@ -306,6 +343,7 @@
306 buildActionMask = 2147483647; 343 buildActionMask = 2147483647;
307 files = ( 344 files = (
308 0AF7A8AF182AAEEF003645C4 /* PCChartViewController.m in Sources */, 345 0AF7A8AF182AAEEF003645C4 /* PCChartViewController.m in Sources */,
  346 + 9F656B51184A4E34002E5675 /* UICountingLabel.m in Sources */,
309 0AF7A8BF182AEB99003645C4 /* PNColor.m in Sources */, 347 0AF7A8BF182AEB99003645C4 /* PNColor.m in Sources */,
310 0AF7A8BE182AEB99003645C4 /* PNChartLabel.m in Sources */, 348 0AF7A8BE182AEB99003645C4 /* PNChartLabel.m in Sources */,
311 0AF7A8B9182AEB80003645C4 /* PNBar.m in Sources */, 349 0AF7A8B9182AEB80003645C4 /* PNBar.m in Sources */,
@@ -50,6 +50,26 @@ @@ -50,6 +50,26 @@
50 [barChart strokeChart]; 50 [barChart strokeChart];
51 [self.chartScrollView addSubview:barChartLabel]; 51 [self.chartScrollView addSubview:barChartLabel];
52 [self.chartScrollView addSubview:barChart]; 52 [self.chartScrollView addSubview:barChart];
  53 +
  54 + //Add CircleChart
  55 +
  56 +
  57 + UILabel * circleChartLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 550, SCREEN_WIDTH, 30)];
  58 + circleChartLabel.text = @"Circle Chart";
  59 + circleChartLabel.textColor = PNFreshGreen;
  60 + circleChartLabel.font = [UIFont fontWithName:@"Avenir-Medium" size:23.0];
  61 + circleChartLabel.textAlignment = NSTextAlignmentCenter;
  62 +
  63 + PNChart * circleChart = [[PNChart alloc] initWithFrame:CGRectMake(0, 585.0, SCREEN_WIDTH, 200.0)];
  64 + circleChart.backgroundColor = [UIColor clearColor];
  65 + circleChart.type = PNCircleType;
  66 + circleChart.total = [NSNumber numberWithInt:100];
  67 + circleChart.current = [NSNumber numberWithInt:60];
  68 + [circleChart strokeChart];
  69 + [self.chartScrollView addSubview:circleChartLabel];
  70 + [self.chartScrollView addSubview:circleChart];
  71 +
  72 + [self.chartScrollView setContentSize:CGSizeMake(SCREEN_WIDTH, 900.0)];
53 73
54 // Do any additional setup after loading the view. 74 // Do any additional setup after loading the view.
55 } 75 }
@@ -12,12 +12,15 @@ @@ -12,12 +12,15 @@
12 #import "PNColor.h" 12 #import "PNColor.h"
13 #import "PNLineChart.h" 13 #import "PNLineChart.h"
14 #import "PNBarChart.h" 14 #import "PNBarChart.h"
  15 +#import "PNCircleChart.h"
15 16
16 typedef enum { 17 typedef enum {
17 /** Solid line chart style */ 18 /** Solid line chart style */
18 PNLineType, 19 PNLineType,
19 /** Bar chart style with bar background color */ 20 /** Bar chart style with bar background color */
20 - PNBarType 21 + PNBarType,
  22 + /** Circle chart */
  23 + PNCircleType
21 24
22 } PNChartType; 25 } PNChartType;
23 26
@@ -48,6 +51,8 @@ typedef enum { @@ -48,6 +51,8 @@ typedef enum {
48 51
49 @property (strong, nonatomic) PNBarChart * barChart; 52 @property (strong, nonatomic) PNBarChart * barChart;
50 53
  54 +@property (strong, nonatomic) PNCircleChart * circleChart;
  55 +
51 /** 56 /**
52 * PNChart chart type. The default is PNLineChart. 57 * PNChart chart type. The default is PNLineChart.
53 * 58 *
@@ -63,5 +68,18 @@ typedef enum { @@ -63,5 +68,18 @@ typedef enum {
63 68
64 @property (nonatomic, strong) UIColor * strokeColor; 69 @property (nonatomic, strong) UIColor * strokeColor;
65 70
  71 +/**
  72 + * PNChart circle chart total number.
  73 + *
  74 + */
  75 +
  76 +@property (nonatomic, strong) NSNumber * total;
  77 +
  78 +/**
  79 + * PNChart circle chart current number.
  80 + *
  81 + */
  82 +@property (nonatomic, strong) NSNumber * current;
  83 +
66 84
67 @end 85 @end
@@ -18,6 +18,7 @@ @@ -18,6 +18,7 @@
18 self.backgroundColor = [UIColor whiteColor]; 18 self.backgroundColor = [UIColor whiteColor];
19 self.clipsToBounds = NO; 19 self.clipsToBounds = NO;
20 self.type = PNLineType; 20 self.type = PNLineType;
  21 + self.strokeColor = PNFreshGreen;
21 } 22 }
22 23
23 return self; 24 return self;
@@ -43,7 +44,15 @@ @@ -43,7 +44,15 @@
43 [_barChart setStrokeColor:_strokeColor]; 44 [_barChart setStrokeColor:_strokeColor];
44 [_barChart strokeChart]; 45 [_barChart strokeChart];
45 46
46 - } 47 + }else if (self.type == PNCircleType)
  48 + {
  49 + _circleChart = [[PNCircleChart alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height) andTotal:self.total andCurrent:self.current];
  50 + _circleChart.backgroundColor = [UIColor clearColor];
  51 + _circleChart.lineWidth = [NSNumber numberWithFloat:8.0];
  52 + [_circleChart setStrokeColor:_strokeColor];
  53 + [_circleChart strokeChart];
  54 + [self addSubview:_circleChart];
  55 + }
47 } 56 }
48 57
49 58
@@ -7,6 +7,10 @@ @@ -7,6 +7,10 @@
7 // 7 //
8 8
9 #import <UIKit/UIKit.h> 9 #import <UIKit/UIKit.h>
  10 +#import "PNColor.h"
  11 +
  12 +
  13 +#define DEGREES_TO_RADIANS(angle) ((angle) / 180.0 * M_PI)
10 14
11 @interface PNCircleChart : UIView 15 @interface PNCircleChart : UIView
12 16
@@ -14,10 +18,11 @@ @@ -14,10 +18,11 @@
14 - (id)initWithFrame:(CGRect)frame andTotal:(NSNumber *)total andCurrent:(NSNumber *)current; 18 - (id)initWithFrame:(CGRect)frame andTotal:(NSNumber *)total andCurrent:(NSNumber *)current;
15 19
16 @property (nonatomic, strong) UIColor * strokeColor; 20 @property (nonatomic, strong) UIColor * strokeColor;
17 -  
18 @property (nonatomic, strong) NSNumber * total; 21 @property (nonatomic, strong) NSNumber * total;
19 @property (nonatomic, strong) NSNumber * current; 22 @property (nonatomic, strong) NSNumber * current;
  23 +@property (nonatomic, strong) NSNumber * lineWidth;
20 24
21 - 25 +@property(nonatomic,strong) CAShapeLayer * circle;
  26 +@property(nonatomic,strong) CAShapeLayer * circleBG;
22 27
23 @end 28 @end
@@ -7,19 +7,83 @@ @@ -7,19 +7,83 @@
7 // 7 //
8 8
9 #import "PNCircleChart.h" 9 #import "PNCircleChart.h"
  10 +#import "UICountingLabel.h"
10 11
11 @implementation PNCircleChart 12 @implementation PNCircleChart
12 13
13 -- (id)initWithFrame:(CGRect)frame 14 +
  15 +- (id)initWithFrame:(CGRect)frame andTotal:(NSNumber *)total andCurrent:(NSNumber *)current
14 { 16 {
15 self = [super initWithFrame:frame]; 17 self = [super initWithFrame:frame];
  18 +
16 if (self) { 19 if (self) {
17 - // Initialization code 20 + _total = total;
  21 + _current = current;
  22 +
  23 + NSLog(@"Total is %f frame is %f",[total floatValue],frame.size.height);
  24 +
  25 + UIBezierPath* circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.center.x,self.center.y - 25.0) radius:50.0 startAngle:DEGREES_TO_RADIANS(270) endAngle:DEGREES_TO_RADIANS(270.01) clockwise:NO];
  26 +
  27 + _circle = [CAShapeLayer layer];
  28 + _circle.path = circlePath.CGPath;
  29 + _circle.lineCap = kCALineCapRound;
  30 + _circle.fillColor = [UIColor clearColor].CGColor;
  31 + _circle.lineWidth = [_lineWidth floatValue];
  32 + _circle.zPosition = 1;
  33 +
  34 + _circleBG = [CAShapeLayer layer];
  35 + _circleBG.path = circlePath.CGPath;
  36 + _circleBG.lineCap = kCALineCapRound;
  37 + _circleBG.fillColor = [UIColor clearColor].CGColor;
  38 + _circleBG.lineWidth = [_lineWidth floatValue];
  39 + _circleBG.strokeColor = PNLightYellow.CGColor;
  40 + _circleBG.strokeEnd = 1.0;
  41 + _circleBG.zPosition = -1;
  42 +
  43 + [self.layer addSublayer:_circle];
  44 + [self.layer addSublayer:_circleBG];
  45 +
18 } 46 }
  47 +
19 return self; 48 return self;
  49 +
20 } 50 }
21 51
22 - 52 +-(void)strokeChart
  53 +{
  54 + //Add count label
  55 +
  56 + UICountingLabel* gradeLabel = [[UICountingLabel alloc] initWithFrame:CGRectMake(0, 0, 50.0, 50.0)];
  57 + [gradeLabel setTextAlignment:NSTextAlignmentCenter];
  58 + [gradeLabel setFont:[UIFont boldSystemFontOfSize:13.0f]];
  59 + [gradeLabel setTextColor: PNDeepGrey];
  60 + [gradeLabel setCenter:CGPointMake(self.center.x,self.center.y - 25.0)];
  61 + gradeLabel.method = UILabelCountingMethodEaseInOut;
  62 + gradeLabel.format = @"%d%%";
  63 +
  64 +
  65 + [self addSubview:gradeLabel];
  66 +
  67 + //Add circle params
  68 +
  69 + _circle.lineWidth = [_lineWidth floatValue];
  70 + _circleBG.lineWidth = [_lineWidth floatValue];
  71 + _circleBG.strokeEnd = 1.0;
  72 + _circle.strokeColor = _strokeColor.CGColor;
  73 +
  74 + //Add Animation
  75 + CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
  76 + pathAnimation.duration = 1.0;
  77 + pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
  78 + pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
  79 + pathAnimation.toValue = [NSNumber numberWithFloat:[_current floatValue]/[_total floatValue]];
  80 + pathAnimation.autoreverses = NO;
  81 + [_circle addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
  82 + _circle.strokeEnd = [_current floatValue]/[_total floatValue];
  83 +
  84 + [gradeLabel countFrom:0 to:[_current floatValue]/[_total floatValue]*100 withDuration:1.0];
  85 +
  86 +}
23 87
24 /* 88 /*
25 // Only override drawRect: if you perform custom drawing. 89 // Only override drawRect: if you perform custom drawing.