iOS / PNChart

Go to a project
Toggle navigation Toggle navigation pinning
kevinzhow
918d2e99 1 parent b554b0c8

Update bar chart update

Inline Side-by-side
Showing 5 changed files with 143 additions and 100 deletions
@@ -18,5 +18,6 @@ @@ -18,5 +18,6 @@
18 @property (nonatomic) UIColor *barColor; 18 @property (nonatomic) UIColor *barColor;
19 @property (nonatomic) UIColor *barColorGradientStart; 19 @property (nonatomic) UIColor *barColorGradientStart;
20 @property (nonatomic) CGFloat barRadius; 20 @property (nonatomic) CGFloat barRadius;
  21 +@property (nonatomic) CAShapeLayer *gradientMask;
21 22
22 @end 23 @end
@@ -38,7 +38,8 @@ @@ -38,7 +38,8 @@
38 38
39 - (void)setGrade:(float)grade 39 - (void)setGrade:(float)grade
40 { 40 {
41 - _grade = grade; 41 + NSLog(@"New garde %f",grade);
  42 +
42 UIBezierPath *progressline = [UIBezierPath bezierPath]; 43 UIBezierPath *progressline = [UIBezierPath bezierPath];
43 44
44 [progressline moveToPoint:CGPointMake(self.frame.size.width / 2.0, self.frame.size.height)]; 45 [progressline moveToPoint:CGPointMake(self.frame.size.width / 2.0, self.frame.size.height)];
@@ -46,7 +47,7 @@ @@ -46,7 +47,7 @@
46 47
47 [progressline setLineWidth:1.0]; 48 [progressline setLineWidth:1.0];
48 [progressline setLineCapStyle:kCGLineCapSquare]; 49 [progressline setLineCapStyle:kCGLineCapSquare];
49 - _chartLine.path = progressline.CGPath; 50 +
50 51
51 if (_barColor) { 52 if (_barColor) {
52 _chartLine.strokeColor = [_barColor CGColor]; 53 _chartLine.strokeColor = [_barColor CGColor];
@@ -55,45 +56,69 @@ @@ -55,45 +56,69 @@
55 _chartLine.strokeColor = [PNGreen CGColor]; 56 _chartLine.strokeColor = [PNGreen CGColor];
56 } 57 }
57 58
58 - CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 59 + if (_grade) {
59 - pathAnimation.duration = 1.0; 60 +
60 - pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 61 + CABasicAnimation * pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
61 - pathAnimation.fromValue = @0.0f; 62 + pathAnimation.fromValue = (id)_chartLine.path;
62 - pathAnimation.toValue = @1.0f; 63 + pathAnimation.toValue = (id)[progressline CGPath];
63 - [_chartLine addAnimation:pathAnimation forKey:@"strokeEndAnimation"]; 64 + pathAnimation.duration = 0.5f;
64 - 65 + pathAnimation.autoreverses = NO;
65 - _chartLine.strokeEnd = 1.0; 66 + pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
66 - 67 + [_chartLine addAnimation:pathAnimation forKey:@"animationKey"];
67 - // Check if user wants to add a gradient from the start color to the bar color 68 +
68 - if (_barColorGradientStart) { 69 + _chartLine.path = progressline.CGPath;
69 - 70 +
70 - // Add gradient 71 + if (_barColorGradientStart) {
71 - CAShapeLayer *gradientMask = [CAShapeLayer layer]; 72 +
72 - gradientMask.fillColor = [[UIColor clearColor] CGColor]; 73 + // Add gradient
73 - gradientMask.strokeColor = [[UIColor blackColor] CGColor]; 74 + [self.gradientMask addAnimation:pathAnimation forKey:@"animationKey"];
74 - gradientMask.lineWidth = self.frame.size.width; 75 + self.gradientMask.path = progressline.CGPath;
75 - gradientMask.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height); 76 + }
76 - gradientMask.path = progressline.CGPath; 77 +
77 - 78 + }else{
78 - 79 + CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
79 - CAGradientLayer *gradientLayer = [CAGradientLayer layer]; 80 + pathAnimation.duration = 1.0;
80 - gradientLayer.startPoint = CGPointMake(0.5,1.0); 81 + pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
81 - gradientLayer.endPoint = CGPointMake(0.5,0.0); 82 + pathAnimation.fromValue = @0.0f;
82 - gradientLayer.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height); 83 + pathAnimation.toValue = @1.0f;
83 - UIColor *endColor = (_barColor ? _barColor : [UIColor greenColor]); 84 + [_chartLine addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
84 - NSArray *colors = @[ 85 +
85 - (id)_barColorGradientStart.CGColor, 86 + _chartLine.strokeEnd = 1.0;
86 - (id)endColor.CGColor 87 +
87 - ]; 88 + _chartLine.path = progressline.CGPath;
88 - gradientLayer.colors = colors; 89 + // Check if user wants to add a gradient from the start color to the bar color
89 - 90 + if (_barColorGradientStart) {
90 - [gradientLayer setMask:gradientMask]; 91 +
91 - 92 + // Add gradient
92 - [_chartLine addSublayer:gradientLayer]; 93 + self.gradientMask = [CAShapeLayer layer];
93 - 94 + self.gradientMask.fillColor = [[UIColor clearColor] CGColor];
94 - gradientMask.strokeEnd = 1.0; 95 + self.gradientMask.strokeColor = [[UIColor blackColor] CGColor];
95 - [gradientMask addAnimation:pathAnimation forKey:@"strokeEndAnimation"]; 96 + self.gradientMask.lineWidth = self.frame.size.width;
  97 + self.gradientMask.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);
  98 + self.gradientMask.path = progressline.CGPath;
  99 +
  100 +
  101 + CAGradientLayer *gradientLayer = [CAGradientLayer layer];
  102 + gradientLayer.startPoint = CGPointMake(0.5,1.0);
  103 + gradientLayer.endPoint = CGPointMake(0.5,0.0);
  104 + gradientLayer.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);
  105 + UIColor *endColor = (_barColor ? _barColor : [UIColor greenColor]);
  106 + NSArray *colors = @[
  107 + (id)_barColorGradientStart.CGColor,
  108 + (id)endColor.CGColor
  109 + ];
  110 + gradientLayer.colors = colors;
  111 +
  112 + [gradientLayer setMask:self.gradientMask];
  113 +
  114 + [_chartLine addSublayer:gradientLayer];
  115 +
  116 + self.gradientMask.strokeEnd = 1.0;
  117 + [self.gradientMask addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
  118 + }
96 } 119 }
  120 +
  121 + _grade = grade;
97 122
98 } 123 }
99 124
@@ -36,6 +36,9 @@ typedef NSString *(^PNYLabelFormatter)(CGFloat yLabelValue); @@ -36,6 +36,9 @@ typedef NSString *(^PNYLabelFormatter)(CGFloat yLabelValue);
36 @property (nonatomic) NSArray *strokeColors; 36 @property (nonatomic) NSArray *strokeColors;
37 37
38 38
  39 +/** Update Values. */
  40 +- (void)updateChartData:(NSArray *)data;
  41 +
39 /** Changes chart margin. */ 42 /** Changes chart margin. */
40 @property (nonatomic) CGFloat yChartLabelWidth; 43 @property (nonatomic) CGFloat yChartLabelWidth;
41 44
@@ -91,6 +91,11 @@ @@ -91,6 +91,11 @@
91 } 91 }
92 } 92 }
93 93
  94 +-(void)updateChartData:(NSArray *)data{
  95 + self.yValues = data;
  96 + [self updateBar];
  97 +}
  98 +
94 - (void)getYValueMax:(NSArray *)yLabels 99 - (void)getYValueMax:(NSArray *)yLabels
95 { 100 {
96 int max = [[yLabels valueForKeyPath:@"@max.intValue"] intValue]; 101 int max = [[yLabels valueForKeyPath:@"@max.intValue"] intValue];
@@ -151,81 +156,90 @@ @@ -151,81 +156,90 @@
151 _strokeColor = strokeColor; 156 _strokeColor = strokeColor;
152 } 157 }
153 158
154 - 159 +- (void)updateBar
155 -- (void)strokeChart  
156 { 160 {
157 - //Add Labels 161 +
158 -  
159 - [self viewCleanupForCollection:_bars];  
160 -  
161 -  
162 //Add bars 162 //Add bars
163 CGFloat chartCavanHeight = self.frame.size.height - _chartMargin * 2 - xLabelHeight; 163 CGFloat chartCavanHeight = self.frame.size.height - _chartMargin * 2 - xLabelHeight;
164 NSInteger index = 0; 164 NSInteger index = 0;
165 - 165 +
166 for (NSNumber *valueString in _yValues) { 166 for (NSNumber *valueString in _yValues) {
167 - float value = [valueString floatValue]; 167 +
168 -  
169 - float grade = (float)value / (float)_yValueMax;  
170 -  
171 - if (isnan(grade)) {  
172 - grade = 0;  
173 - }  
174 -  
175 PNBar *bar; 168 PNBar *bar;
176 - CGFloat barWidth; 169 +
177 - CGFloat barXPosition; 170 + if (_bars.count == _yValues.count) {
178 - 171 + bar = [_bars objectAtIndex:index];
179 - if (_barWidth) {  
180 - barWidth = _barWidth;  
181 - barXPosition = index * _xLabelWidth + _chartMargin + _xLabelWidth /2.0 - _barWidth /2.0;  
182 }else{ 172 }else{
183 - barXPosition = index * _xLabelWidth + _chartMargin + _xLabelWidth * 0.25; 173 + CGFloat barWidth;
184 - if (_showLabel) { 174 + CGFloat barXPosition;
185 - barWidth = _xLabelWidth * 0.5; 175 +
186 - 176 + if (_barWidth) {
  177 + barWidth = _barWidth;
  178 + barXPosition = index * _xLabelWidth + _chartMargin + _xLabelWidth /2.0 - _barWidth /2.0;
  179 + }else{
  180 + barXPosition = index * _xLabelWidth + _chartMargin + _xLabelWidth * 0.25;
  181 + if (_showLabel) {
  182 + barWidth = _xLabelWidth * 0.5;
  183 +
  184 + }
  185 + else {
  186 + barWidth = _xLabelWidth * 0.6;
  187 +
  188 + }
187 } 189 }
188 - else { 190 +
189 - barWidth = _xLabelWidth * 0.6; 191 + bar = [[PNBar alloc] initWithFrame:CGRectMake(barXPosition, //Bar X position
190 - 192 + self.frame.size.height - chartCavanHeight - xLabelHeight - _chartMargin, //Bar Y position
  193 + barWidth, // Bar witdh
  194 + chartCavanHeight)]; //Bar height
  195 +
  196 + //Change Bar Radius
  197 + bar.barRadius = _barRadius;
  198 +
  199 + //Change Bar Background color
  200 + bar.backgroundColor = _barBackgroundColor;
  201 +
  202 + //Bar StrokColor First
  203 + if (self.strokeColor) {
  204 + bar.barColor = self.strokeColor;
  205 + }else{
  206 + bar.barColor = [self barColorAtIndex:index];
191 } 207 }
  208 + // Add gradient
  209 + bar.barColorGradientStart = _barColorGradientStart;
  210 +
  211 + //For Click Index
  212 + bar.tag = index;
  213 +
  214 + [_bars addObject:bar];
  215 + [self addSubview:bar];
192 } 216 }
193 - 217 +
194 - bar = [[PNBar alloc] initWithFrame:CGRectMake(barXPosition, //Bar X position  
195 - self.frame.size.height - chartCavanHeight - xLabelHeight - _chartMargin, //Bar Y position  
196 - barWidth, // Bar witdh  
197 - chartCavanHeight)]; //Bar height  
198 -  
199 - //Change Bar Radius  
200 - bar.barRadius = _barRadius;  
201 -  
202 - //Change Bar Background color  
203 - bar.backgroundColor = _barBackgroundColor;  
204 -  
205 - //Bar StrokColor First  
206 - if (self.strokeColor) {  
207 - bar.barColor = self.strokeColor;  
208 - }else{  
209 - bar.barColor = [self barColorAtIndex:index];  
210 - }  
211 -  
212 //Height Of Bar 218 //Height Of Bar
  219 + float value = [valueString floatValue];
  220 +
  221 + float grade = (float)value / (float)_yValueMax;
  222 +
  223 + if (isnan(grade)) {
  224 + grade = 0;
  225 + }
213 bar.grade = grade; 226 bar.grade = grade;
  227 +
  228 + index += 1;
  229 + }
  230 +}
214 231
215 - // Add gradient 232 +- (void)strokeChart
216 - bar.barColorGradientStart = _barColorGradientStart; 233 +{
217 - 234 + //Add Labels
218 -  
219 - //For Click Index  
220 - bar.tag = index;  
221 -  
222 235
223 - [_bars addObject:bar]; 236 + [self viewCleanupForCollection:_bars];
224 - [self addSubview:bar];  
225 237
226 - index += 1;  
227 - }  
228 238
  239 + //Update Bar
  240 +
  241 + [self updateBar];
  242 +
229 //Add chart border lines 243 //Add chart border lines
230 244
231 if (_showChartBorder) { 245 if (_showChartBorder) {
@@ -136,7 +136,7 @@ @@ -136,7 +136,7 @@
136 else if ([self.title isEqualToString:@"Bar Chart"]) 136 else if ([self.title isEqualToString:@"Bar Chart"])
137 { 137 {
138 [self.barChart setXLabels:@[@"Jan 1",@"Jan 2",@"Jan 3",@"Jan 4",@"Jan 5",@"Jan 6",@"Jan 7"]]; 138 [self.barChart setXLabels:@[@"Jan 1",@"Jan 2",@"Jan 3",@"Jan 4",@"Jan 5",@"Jan 6",@"Jan 7"]];
139 - [self.barChart setYValues:@[@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30)]]; 139 + [self.barChart updateChartData:@[@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30)]];
140 } 140 }
141 141
142 } 142 }