iOS / PNChart

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

Add circle chart change value

Inline Side-by-side
Showing 6 changed files with 68 additions and 45 deletions
... ... @@ -22,6 +22,7 @@ typedef NS_ENUM (NSUInteger, PNChartFormatType) {
- (void)strokeChart;
- (void)growChartByAmount:(NSNumber *)growAmount;
- (void)updateChartByCurrent:(NSNumber *)current;
- (id)initWithFrame:(CGRect)frame
total:(NSNumber *)total
current:(NSNumber *)current
... ... @@ -37,7 +38,9 @@ typedef NS_ENUM (NSUInteger, PNChartFormatType) {
@property (nonatomic) NSTimeInterval duration;
@property (nonatomic) PNChartFormatType chartType;
@property (nonatomic) CAShapeLayer *circle;
@property (nonatomic) CAShapeLayer *gradientMask;
@property (nonatomic) CAShapeLayer *circleBackground;
@end
... ...
... ... @@ -116,14 +116,14 @@
if (_strokeColorGradientStart) {
// Add gradient
CAShapeLayer *gradientMask = [CAShapeLayer layer];
gradientMask.fillColor = [[UIColor clearColor] CGColor];
gradientMask.strokeColor = [[UIColor blackColor] CGColor];
gradientMask.lineWidth = _circle.lineWidth;
gradientMask.lineCap = kCALineCapRound;
self.gradientMask = [CAShapeLayer layer];
self.gradientMask.fillColor = [[UIColor clearColor] CGColor];
self.gradientMask.strokeColor = [[UIColor blackColor] CGColor];
self.gradientMask.lineWidth = _circle.lineWidth;
self.gradientMask.lineCap = kCALineCapRound;
CGRect gradientFrame = CGRectMake(0, 0, 2*self.bounds.size.width, 2*self.bounds.size.height);
gradientMask.frame = gradientFrame;
gradientMask.path = _circle.path;
self.gradientMask.frame = gradientFrame;
self.gradientMask.path = _circle.path;
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.startPoint = CGPointMake(0.5,1.0);
... ... @@ -136,13 +136,13 @@
];
gradientLayer.colors = colors;
[gradientLayer setMask:gradientMask];
[gradientLayer setMask:self.gradientMask];
[_circle addSublayer:gradientLayer];
gradientMask.strokeEnd = [_current floatValue] / [_total floatValue];
self.gradientMask.strokeEnd = [_current floatValue] / [_total floatValue];
[gradientMask addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
[self.gradientMask addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
}
}
... ... @@ -153,16 +153,27 @@
NSNumber *updatedValue = [NSNumber numberWithFloat:[_current floatValue] + [growAmount floatValue]];
// Add animation
[self updateChartByCurrent:updatedValue];
}
-(void)updateChartByCurrent:(NSNumber *)current{
// Add animation
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = self.duration;
pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
pathAnimation.fromValue = @([_current floatValue] / [_total floatValue]);
pathAnimation.toValue = @([updatedValue floatValue] / [_total floatValue]);
_circle.strokeEnd = [updatedValue floatValue] / [_total floatValue];
pathAnimation.toValue = @([current floatValue] / [_total floatValue]);
_circle.strokeEnd = [current floatValue] / [_total floatValue];
if (_strokeColorGradientStart) {
self.gradientMask.strokeEnd = _circle.strokeEnd;
[self.gradientMask addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
}
[_circle addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
[self.countingLabel countFrom:fmin([_current floatValue], [_total floatValue]) to:fmin([_current floatValue] + [growAmount floatValue], [_total floatValue]) withDuration:self.duration];
_current = updatedValue;
[self.countingLabel countFrom:fmin([_current floatValue], [_total floatValue]) to:fmin([current floatValue], [_total floatValue]) withDuration:self.duration];
_current = current;
}
@end
... ...
... ... @@ -26,14 +26,25 @@
<action selector="changeValue:" destination="Tha-Wr-sPW" eventType="touchUpInside" id="zeG-Cp-Wjs"/>
</connections>
</button>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" text="Label" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="FUU-vZ-jMd">
<rect key="frame" x="53" y="81" width="215" height="30"/>
<fontDescription key="fontDescription" name="Avenir-Medium" family="Avenir" pointSize="23"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
<constraints>
<constraint firstItem="FUU-vZ-jMd" firstAttribute="top" secondItem="znr-YO-4a4" secondAttribute="bottom" constant="17" id="DLv-qJ-h7R"/>
<constraint firstAttribute="centerX" secondItem="FUU-vZ-jMd" secondAttribute="centerX" id="YGT-a5-Zka"/>
<constraint firstItem="L3F-13-Wf5" firstAttribute="top" secondItem="znr-YO-4a4" secondAttribute="bottom" constant="300" id="ewm-kv-p8k"/>
<constraint firstAttribute="centerX" secondItem="L3F-13-Wf5" secondAttribute="centerX" id="zXw-WV-mro"/>
</constraints>
</view>
<navigationItem key="navigationItem" title="PNChart" id="Ukg-Sg-E2z"/>
<connections>
<outlet property="titleLabel" destination="FUU-vZ-jMd" id="dA3-KC-Ht4"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="kDa-u3-t6i" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
... ...
... ... @@ -14,6 +14,8 @@
@property (nonatomic) PNLineChart * lineChart;
@property (nonatomic) PNBarChart * barChart;
@property (nonatomic) PNCircleChart * circleChart;
@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
- (IBAction)changeValue:(id)sender;
... ...
... ... @@ -13,13 +13,11 @@
-(void)viewDidLoad
{
[super viewDidLoad];
self.titleLabel.textColor = PNFreshGreen;
if ([self.title isEqualToString:@"Line Chart"]) {
UILabel * lineChartLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 90, SCREEN_WIDTH, 30)];
lineChartLabel.text = @"Line Chart";
lineChartLabel.textColor = PNFreshGreen;
lineChartLabel.font = [UIFont fontWithName:@"Avenir-Medium" size:23.0];
lineChartLabel.textAlignment = NSTextAlignmentCenter;
self.titleLabel.text = @"Line Chart";
self.lineChart = [[PNLineChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];
self.lineChart.yLabelFormat = @"%1.1f";
... ... @@ -58,16 +56,12 @@
[self.lineChart strokeChart];
self.lineChart.delegate = self;
[self.view addSubview:lineChartLabel];
[self.view addSubview:self.lineChart];
}
else if ([self.title isEqualToString:@"Bar Chart"])
{
UILabel * barChartLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 90, SCREEN_WIDTH, 30)];
barChartLabel.text = @"Bar Chart";
barChartLabel.textColor = PNFreshGreen;
barChartLabel.font = [UIFont fontWithName:@"Avenir-Medium" size:23.0];
barChartLabel.textAlignment = NSTextAlignmentCenter;
self.titleLabel.text = @"Bar Chart";
self.barChart = [[PNBarChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];
self.barChart.backgroundColor = [UIColor clearColor];
... ... @@ -88,9 +82,25 @@
self.barChart.delegate = self;
[self.view addSubview:barChartLabel];
[self.view addSubview:self.barChart];
}
else if ([self.title isEqualToString:@"Circle Chart"])
{
self.titleLabel.text = @"Circle Chart";
self.circleChart = [[PNCircleChart alloc] initWithFrame:CGRectMake(0, 80.0, SCREEN_WIDTH, 100.0)
total:@100
current:@60
clockwise:YES
shadow:YES];
self.circleChart.backgroundColor = [UIColor clearColor];
[self.circleChart setStrokeColor:PNGreen];
[self.circleChart setStrokeColorGradientStart:[UIColor blueColor]];
[self.circleChart strokeChart];
[self.view addSubview:self.circleChart];
}
}
... ... @@ -138,6 +148,10 @@
[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)];
}
}
... ...
... ... @@ -32,25 +32,7 @@
} else if ([segue.identifier isEqualToString:@"circleChart"])
{
//Add circle chart
UILabel * circleChartLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 90, SCREEN_WIDTH, 30)];
circleChartLabel.text = @"Circle Chart";
circleChartLabel.textColor = PNFreshGreen;
circleChartLabel.font = [UIFont fontWithName:@"Avenir-Medium" size:23.0];
circleChartLabel.textAlignment = NSTextAlignmentCenter;
PNCircleChart * circleChart = [[PNCircleChart alloc] initWithFrame:CGRectMake(0, 80.0, SCREEN_WIDTH, 100.0)
total:@100
current:@60
clockwise:YES
shadow:YES];
circleChart.backgroundColor = [UIColor clearColor];
[circleChart setStrokeColor:PNGreen];
[circleChart setStrokeColorGradientStart:[UIColor blueColor]];
[circleChart strokeChart];
[viewController.view addSubview:circleChartLabel];
[viewController.view addSubview:circleChart];
viewController.title = @"Circle Chart";
} else if ([segue.identifier isEqualToString:@"pieChart"])
... ...