Merge pull request Boris-Em#98 from kattrali/fill-gradients

Add ability to fill the top and/or bottom of a graph with a gradient
adonishi · Nov 11, 2014 · 4d1241a · 4d1241a
2 parents 7baa81d + 8dc0924
commit 4d1241a
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 2 deletions.
diff --git a/Classes/BEMLine.h b/Classes/BEMLine.h
@@ -79,16 +79,22 @@ typedef NS_ENUM(NSInteger, BEMLineAnimation) {
 /// The color of the area above the line, inside of its superview
 @property (strong, nonatomic) UIColor *topColor;
 
+/// A color gradient applied to the area above the line, inside of its superview. If set, it will be drawn on top of the fill from the \p topColor property.
+@property (assign, nonatomic) CGGradientRef topGradient;
+
 /// The color of the area below the line, inside of its superview
 @property (strong, nonatomic) UIColor *bottomColor;
 
+/// A color gradient applied to the area below the line, inside of its superview. If set, it will be drawn on top of the fill from the \p bottomColor property.
+@property (assign, nonatomic) CGGradientRef bottomGradient;
+
 @property (strong, nonatomic) UIColor *xAxisBackgroundColor;
 
 @property (nonatomic) CGFloat xAxisBackgroundAlpha;
 
 /** A color gradient to be applied to the line. If this property is set, it will mask (override) the \p color property.
  @todo This property is non-functional at this point in time. It only serves as a marker for further implementation. */
-@property (assign, nonatomic) CGGradientRef gradient;
+@property (assign, nonatomic) CGGradientRef lineGradient;
 
 /// The reference line color. Defaults to `color`.
 @property (strong, nonatomic) UIColor *refrenceLineColor;

diff --git a/Classes/BEMLine.m b/Classes/BEMLine.m
@@ -180,9 +180,26 @@ - (void)drawRect:(CGRect)rect {
     // ---------------------------//
     [self.topColor set];
     [fillTop fillWithBlendMode:kCGBlendModeNormal alpha:self.topAlpha];
-    
+
     [self.bottomColor set];
     [fillBottom fillWithBlendMode:kCGBlendModeNormal alpha:self.bottomAlpha];
+
+    CGContextRef ctx = UIGraphicsGetCurrentContext();
+    if (self.topGradient != nil) {
+        CGContextSaveGState(ctx);
+        CGContextAddPath(ctx, [fillTop CGPath]);
+        CGContextClip(ctx);
+        CGContextDrawLinearGradient(ctx, self.topGradient, CGPointZero, CGPointMake(0, CGRectGetMaxY(fillTop.bounds)), 0);
+        CGContextRestoreGState(ctx);
+    }
+
+    if (self.bottomGradient != nil) {
+        CGContextSaveGState(ctx);
+        CGContextAddPath(ctx, [fillBottom CGPath]);
+        CGContextClip(ctx);
+        CGContextDrawLinearGradient(ctx, self.bottomGradient, CGPointZero, CGPointMake(0, CGRectGetMaxY(fillBottom.bounds)), 0);
+        CGContextRestoreGState(ctx);
+    }
 
 
     // ---------------------------//

diff --git a/Classes/BEMSimpleLineGraphView.h b/Classes/BEMSimpleLineGraphView.h
@@ -197,6 +197,10 @@
 @property (nonatomic) CGFloat alphaBottom;
 
 
+/// Fill gradient of the bottom part of the graph (between the line and the X-axis). When set, it will draw a gradient over top of the fill provided by the \p colorBottom and \p alphaBottom properties.
+@property (assign, nonatomic) CGGradientRef gradientBottom;
+
+
 /// Color of the top part of the graph (between the line and the top of the view the graph is drawn in).
 @property (strong, nonatomic) UIColor *colorTop;
 
@@ -205,6 +209,9 @@
 @property (nonatomic) CGFloat alphaTop;
 
 
+/// Fill gradient of the top part of the graph (between the line and the top of the view the graph is drawn in). When set, it will draw a gradient over top of the fill provided by the \p colorTop and \p alphaTop properties.
+@property (assign, nonatomic) CGGradientRef gradientTop;
+
 /// Color of the line of the graph.
 @property (strong, nonatomic) UIColor *colorLine;
 

diff --git a/Classes/BEMSimpleLineGraphView.m b/Classes/BEMSimpleLineGraphView.m
@@ -441,6 +441,8 @@ - (void)drawLine {
     line.bottomColor = self.colorBottom;
     line.topAlpha = self.alphaTop;
     line.bottomAlpha = self.alphaBottom;
+    line.topGradient = self.gradientTop;
+    line.bottomGradient = self.gradientBottom;
     line.lineWidth = self.widthLine;
     line.lineAlpha = self.alphaLine;
     line.bezierCurveIsEnabled = self.enableBezierCurve;

diff --git a/Sample Project/SimpleLineChart/ViewController.m b/Sample Project/SimpleLineChart/ViewController.m
@@ -45,6 +45,14 @@ - (void)viewDidLoad {
      [self.view addSubview:myGraph]; */
 
     // Customization of the graph
+    CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
+    size_t num_locations = 2;
+    CGFloat locations[2] = { 0.0, 1.0 };
+    CGFloat components[8] = {
+        1.0, 1.0, 1.0, 1.0,
+        1.0, 1.0, 1.0, 0.0
+    };
+    self.myGraph.gradientBottom = CGGradientCreateWithColorComponents(colorspace, components, locations, num_locations);
     self.myGraph.colorTop = [UIColor colorWithRed:31.0/255.0 green:187.0/255.0 blue:166.0/255.0 alpha:1.0];
     self.myGraph.colorBottom = [UIColor colorWithRed:31.0/255.0 green:187.0/255.0 blue:166.0/255.0 alpha:1.0];
     self.myGraph.colorLine = [UIColor whiteColor];