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 @@
@property (nonatomic) UIColor *barColor;
@property (nonatomic) UIColor *barColorGradientStart;
@property (nonatomic) CGFloat barRadius;
@property (nonatomic) CAShapeLayer *gradientMask;
@end
... ...
... ... @@ -38,7 +38,8 @@
- (void)setGrade:(float)grade
{
_grade = grade;
NSLog(@"New garde %f",grade);
UIBezierPath *progressline = [UIBezierPath bezierPath];
[progressline moveToPoint:CGPointMake(self.frame.size.width / 2.0, self.frame.size.height)];
... ... @@ -46,7 +47,7 @@
[progressline setLineWidth:1.0];
[progressline setLineCapStyle:kCGLineCapSquare];
_chartLine.path = progressline.CGPath;
if (_barColor) {
_chartLine.strokeColor = [_barColor CGColor];
... ... @@ -55,45 +56,69 @@
_chartLine.strokeColor = [PNGreen CGColor];
}
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 1.0;
pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
pathAnimation.fromValue = @0.0f;
pathAnimation.toValue = @1.0f;
[_chartLine addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
_chartLine.strokeEnd = 1.0;
// Check if user wants to add a gradient from the start color to the bar color
if (_barColorGradientStart) {
// Add gradient
CAShapeLayer *gradientMask = [CAShapeLayer layer];
gradientMask.fillColor = [[UIColor clearColor] CGColor];
gradientMask.strokeColor = [[UIColor blackColor] CGColor];
gradientMask.lineWidth = self.frame.size.width;
gradientMask.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);
gradientMask.path = progressline.CGPath;
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.startPoint = CGPointMake(0.5,1.0);
gradientLayer.endPoint = CGPointMake(0.5,0.0);
gradientLayer.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);
UIColor *endColor = (_barColor ? _barColor : [UIColor greenColor]);
NSArray *colors = @[
(id)_barColorGradientStart.CGColor,
(id)endColor.CGColor
];
gradientLayer.colors = colors;
[gradientLayer setMask:gradientMask];
[_chartLine addSublayer:gradientLayer];
gradientMask.strokeEnd = 1.0;
[gradientMask addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
if (_grade) {
CABasicAnimation * pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
pathAnimation.fromValue = (id)_chartLine.path;
pathAnimation.toValue = (id)[progressline CGPath];
pathAnimation.duration = 0.5f;
pathAnimation.autoreverses = NO;
pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[_chartLine addAnimation:pathAnimation forKey:@"animationKey"];
_chartLine.path = progressline.CGPath;
if (_barColorGradientStart) {
// Add gradient
[self.gradientMask addAnimation:pathAnimation forKey:@"animationKey"];
self.gradientMask.path = progressline.CGPath;
}
}else{
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 1.0;
pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
pathAnimation.fromValue = @0.0f;
pathAnimation.toValue = @1.0f;
[_chartLine addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
_chartLine.strokeEnd = 1.0;
_chartLine.path = progressline.CGPath;
// Check if user wants to add a gradient from the start color to the bar color
if (_barColorGradientStart) {
// Add gradient
self.gradientMask = [CAShapeLayer layer];
self.gradientMask.fillColor = [[UIColor clearColor] CGColor];
self.gradientMask.strokeColor = [[UIColor blackColor] CGColor];
self.gradientMask.lineWidth = self.frame.size.width;
self.gradientMask.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);
self.gradientMask.path = progressline.CGPath;
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.startPoint = CGPointMake(0.5,1.0);
gradientLayer.endPoint = CGPointMake(0.5,0.0);
gradientLayer.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);
UIColor *endColor = (_barColor ? _barColor : [UIColor greenColor]);
NSArray *colors = @[
(id)_barColorGradientStart.CGColor,
(id)endColor.CGColor
];
gradientLayer.colors = colors;
[gradientLayer setMask:self.gradientMask];
[_chartLine addSublayer:gradientLayer];
self.gradientMask.strokeEnd = 1.0;
[self.gradientMask addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
}
}
_grade = grade;
}
... ...
... ... @@ -36,6 +36,9 @@ typedef NSString *(^PNYLabelFormatter)(CGFloat yLabelValue);
@property (nonatomic) NSArray *strokeColors;
/** Update Values. */
- (void)updateChartData:(NSArray *)data;
/** Changes chart margin. */
@property (nonatomic) CGFloat yChartLabelWidth;
... ...
... ... @@ -91,6 +91,11 @@
}
}
-(void)updateChartData:(NSArray *)data{
self.yValues = data;
[self updateBar];
}
- (void)getYValueMax:(NSArray *)yLabels
{
int max = [[yLabels valueForKeyPath:@"@max.intValue"] intValue];
... ... @@ -151,81 +156,90 @@
_strokeColor = strokeColor;
}
- (void)strokeChart
- (void)updateBar
{
//Add Labels
[self viewCleanupForCollection:_bars];
//Add bars
CGFloat chartCavanHeight = self.frame.size.height - _chartMargin * 2 - xLabelHeight;
NSInteger index = 0;
for (NSNumber *valueString in _yValues) {
float value = [valueString floatValue];
float grade = (float)value / (float)_yValueMax;
if (isnan(grade)) {
grade = 0;
}
PNBar *bar;
CGFloat barWidth;
CGFloat barXPosition;
if (_barWidth) {
barWidth = _barWidth;
barXPosition = index * _xLabelWidth + _chartMargin + _xLabelWidth /2.0 - _barWidth /2.0;
if (_bars.count == _yValues.count) {
bar = [_bars objectAtIndex:index];
}else{
barXPosition = index * _xLabelWidth + _chartMargin + _xLabelWidth * 0.25;
if (_showLabel) {
barWidth = _xLabelWidth * 0.5;
CGFloat barWidth;
CGFloat barXPosition;
if (_barWidth) {
barWidth = _barWidth;
barXPosition = index * _xLabelWidth + _chartMargin + _xLabelWidth /2.0 - _barWidth /2.0;
}else{
barXPosition = index * _xLabelWidth + _chartMargin + _xLabelWidth * 0.25;
if (_showLabel) {
barWidth = _xLabelWidth * 0.5;
}
else {
barWidth = _xLabelWidth * 0.6;
}
}
else {
barWidth = _xLabelWidth * 0.6;
bar = [[PNBar alloc] initWithFrame:CGRectMake(barXPosition, //Bar X position
self.frame.size.height - chartCavanHeight - xLabelHeight - _chartMargin, //Bar Y position
barWidth, // Bar witdh
chartCavanHeight)]; //Bar height
//Change Bar Radius
bar.barRadius = _barRadius;
//Change Bar Background color
bar.backgroundColor = _barBackgroundColor;
//Bar StrokColor First
if (self.strokeColor) {
bar.barColor = self.strokeColor;
}else{
bar.barColor = [self barColorAtIndex:index];
}
// Add gradient
bar.barColorGradientStart = _barColorGradientStart;
//For Click Index
bar.tag = index;
[_bars addObject:bar];
[self addSubview:bar];
}
bar = [[PNBar alloc] initWithFrame:CGRectMake(barXPosition, //Bar X position
self.frame.size.height - chartCavanHeight - xLabelHeight - _chartMargin, //Bar Y position
barWidth, // Bar witdh
chartCavanHeight)]; //Bar height
//Change Bar Radius
bar.barRadius = _barRadius;
//Change Bar Background color
bar.backgroundColor = _barBackgroundColor;
//Bar StrokColor First
if (self.strokeColor) {
bar.barColor = self.strokeColor;
}else{
bar.barColor = [self barColorAtIndex:index];
}
//Height Of Bar
float value = [valueString floatValue];
float grade = (float)value / (float)_yValueMax;
if (isnan(grade)) {
grade = 0;
}
bar.grade = grade;
index += 1;
}
}
// Add gradient
bar.barColorGradientStart = _barColorGradientStart;
//For Click Index
bar.tag = index;
- (void)strokeChart
{
//Add Labels
[_bars addObject:bar];
[self addSubview:bar];
[self viewCleanupForCollection:_bars];
index += 1;
}
//Update Bar
[self updateBar];
//Add chart border lines
if (_showChartBorder) {
... ...
... ... @@ -136,7 +136,7 @@
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 setYValues:@[@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30)]];
[self.barChart updateChartData:@[@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30)]];
}
}
... ...