Added support of Bezier Curved Lines

Classes/BEMLine.h

@@ -28,11 +28,17 @@
 
 //----- POINTS -----//
 
+/// The previous point. Necessary for Bezier curve
+@property (assign, nonatomic) CGPoint P0;
+
 /// The starting point of the line
-@property (assign, nonatomic) CGPoint firstPoint;
+@property (assign, nonatomic) CGPoint P1;
 
 /// The ending point of the line
-@property (assign, nonatomic) CGPoint secondPoint;
+@property (assign, nonatomic) CGPoint P2;
+
+/// The next point. Necessary for Bezier curve
+@property (assign, nonatomic) CGPoint P3;
 
 
 
@@ -72,5 +78,8 @@
 @property (nonatomic) float lineWidth;
 
 
+//----- BEZIER CURVE -----//
+
+@property (nonatomic) BOOL bezierCurveIsEnabled;
 
 @end

Classes/BEMLine.m

@@ -27,10 +27,10 @@ - (void)drawRect:(CGRect)rect {
     CGContextSetFillColorWithColor(ctx, [self.topColor CGColor]);
     CGContextSetAlpha(ctx, self.topAlpha);
     CGContextBeginPath(ctx);
-    CGContextMoveToPoint(ctx, round(self.firstPoint.x), self.firstPoint.y);
-    CGContextAddLineToPoint(ctx, round(self.secondPoint.x), self.secondPoint.y);
-    CGContextAddLineToPoint(ctx, round(self.secondPoint.x), self.frame.origin.y);
-    CGContextAddLineToPoint(ctx, round(self.firstPoint.x), self.frame.origin.x);
+    CGContextMoveToPoint(ctx, round(self.P1.x), self.P1.y);
+    CGContextAddLineToPoint(ctx, round(self.P2.x), self.P2.y);
+    CGContextAddLineToPoint(ctx, round(self.P2.x), self.frame.origin.y);
+    CGContextAddLineToPoint(ctx, round(self.P1.x), self.frame.origin.x);
     CGContextClosePath(ctx);
 
     CGContextDrawPath(ctx, kCGPathFill);
@@ -39,21 +39,27 @@ - (void)drawRect:(CGRect)rect {
     CGContextSetFillColorWithColor(ctx, [self.bottomColor CGColor]);
     CGContextSetAlpha(ctx, self.bottomAlpha);
     CGContextBeginPath(ctx);
-    CGContextMoveToPoint(ctx, round(self.firstPoint.x), self.firstPoint.y);
-    CGContextAddLineToPoint(ctx, round(self.secondPoint.x), self.secondPoint.y);
-    CGContextAddLineToPoint(ctx, round(self.secondPoint.x), self.frame.size.height);
-    CGContextAddLineToPoint(ctx, round(self.firstPoint.x), self.frame.size.height);
+    CGContextMoveToPoint(ctx, round(self.P1.x), self.P1.y);
+    CGContextAddLineToPoint(ctx, round(self.P2.x), self.P2.y);
+    CGContextAddLineToPoint(ctx, round(self.P2.x), self.frame.size.height);
+    CGContextAddLineToPoint(ctx, round(self.P1.x), self.frame.size.height);
     CGContextClosePath(ctx);
 
-    CGContextDrawPath(ctx, kCGPathFill);
+    //BEZIER CURVE
 
-    // LINE GRAPH
+    CGContextDrawPath(ctx, kCGPathFill);
     UIBezierPath *path1 = [UIBezierPath bezierPath];
-
     [path1 setLineWidth:self.lineWidth];
-    [path1 moveToPoint:self.firstPoint];
-    [path1 addLineToPoint:self.secondPoint];
-    path1.lineCapStyle = kCGLineCapRound;
+    [path1 moveToPoint:self.P1];
+
+    if (self.bezierCurveIsEnabled == YES) { // BEZIER CURVE
+        CGPoint CP1 = CGPointMake(self.P1.x + (self.P2.x - self.P1.x)/3, self.P1.y - (self.P1.y - self.P2.y)/3 - (self.P0.y - self.P1.y)*0.3); // First control point
+        CGPoint CP2 = CGPointMake(self.P1.x + 2*(self.P2.x - self.P1.x)/3, (self.P1.y - 2*(self.P1.y - self.P2.y)/3) + (self.P2.y - self.P3.y)*0.3); // Second control point
+        [path1 addCurveToPoint:self.P2 controlPoint1:CP1 controlPoint2:CP2];
+    } else { // SIMPLE LINE
+        [path1 addLineToPoint:self.P2];
+    }
+    path1.lineCapStyle = kCGLineCapSquare;
     [self.color set];
     [path1 strokeWithBlendMode:kCGBlendModeNormal alpha:self.lineAlpha];
 }

Classes/BEMSimpleLineGraphView.h

@@ -137,6 +137,10 @@
 @property (nonatomic) BOOL enableTouchReport;
 
 
+/// The way the graph is drawn, with or withough bezier curved lines. Default value is NO;
+@property (nonatomic) BOOL enableBezierCurve;
+
+
 /// Color of the bottom part of the graph (between the line and the X-axis).
 @property (strong, nonatomic) UIColor *colorBottom;
 

Classes/BEMSimpleLineGraphView.m

@@ -100,6 +100,7 @@ - (void)commonInit {
     _alphaLine = 1.0;
     _widthLine = 1.0;
     _enableTouchReport = NO;
+    _enableBezierCurve = NO;
 
     // Initialize the arrays
     xAxisValues = [NSMutableArray array];
@@ -234,8 +235,15 @@ - (void)drawGraph {
 
     float xDot1; // Postion on the X-axis of the first dot.
     float yDot1; // Postion on the Y-axis of the first dot.
-    float xDot2; // Postion on the X-axis of the next dot.
-    float yDot2; // Postion on the Y-axis of the next dot.
+    float xDot2; // Postion on the X-axis of the second dot.
+    float yDot2; // Postion on the Y-axis of the second dot.
+
+        // For Bezier Curved Lines
+    float xDot0; // Postion on the X-axis of the previous dot.
+    float yDot0; // Postion on the Y-axis of the previous dot.
+    float xDot3; // Postion on the X-axis of the next dot.
+    float yDot3; // Postion on the Y-axis of the next dot.
+
 
     for (UIView *subview in [self subviews]) {
         if ([subview isKindOfClass:[BEMLine class]])
@@ -251,6 +259,12 @@ - (void)drawGraph {
             } else if (dot.tag == i + 101) {
                 xDot2 = dot.center.x;
                 yDot2 = dot.center.y;
+            } else if (dot.tag == i + 102 && self.enableBezierCurve == YES) {
+                xDot3 = dot.center.x;
+                yDot3 = dot.center.y;
+            } else if (dot.tag == i + 99 && self.enableBezierCurve == YES)  {
+                xDot0 = dot.center.x;
+                yDot0 = dot.center.y;
             }
         }
 
@@ -259,8 +273,12 @@ - (void)drawGraph {
         line.tag = i + 1000;
         line.alpha = 0;
         line.backgroundColor = [UIColor clearColor];
-        line.firstPoint = CGPointMake(xDot1, yDot1);
-        line.secondPoint = CGPointMake(xDot2, yDot2);
+        line.P1 = CGPointMake(xDot1, yDot1);
+        line.P2 = CGPointMake(xDot2, yDot2);
+        if (self.enableBezierCurve == YES) {
+            line.P0 = CGPointMake(xDot0, yDot0);
+            line.P3 = CGPointMake(xDot3, yDot3);
+        }
         line.topColor = self.colorTop;
         line.bottomColor = self.colorBottom;
         if ([self.delegate respondsToSelector:@selector(lineGraph:lineColorForIndex:)]) line.color = [self.delegate lineGraph:self lineColorForIndex:i];
@@ -270,6 +288,7 @@ - (void)drawGraph {
         if ([self.delegate respondsToSelector:@selector(lineGraph:lineAlphaForIndex:)]) line.alpha = [self.delegate lineGraph:self lineAlphaForIndex:i];
         else line.lineAlpha = self.alphaLine;
         line.lineWidth = self.widthLine;
+        line.bezierCurveIsEnabled = self.enableBezierCurve;
         [self addSubview:line];
         [self sendSubviewToBack:line];
 

README.md

@@ -1,5 +1,5 @@
 # BEMSimpleLineGraph - Feature Branch
-<p align="center"><img src="http://img843.imageshack.us/img843/3821/ru8f.png"/></p>	
+<p align="center"><img src="http://s29.postimg.org/57dn7ve3r/BEMSimple_Line_Graph_Main.png"/></p>	
 
 <p align="center">
 <b>BEMSimpleLineGraph</b> makes it easy to create and customize line graphs for iOS.
@@ -155,6 +155,14 @@ The property `colorXaxisLabel` controls the color of the text of the UILabels on
 
 	@property (strong, nonatomic) UIColor *colorXaxisLabel;
 
+### Bezier Curves
+<img align="left" width="237" height="141" src="http://s4.postimg.org/ucf4zsyd9/BEMSimple_Line_Graph_Bezier_Curve.png">
+
+BEMSimpleLineGraph can be drawn with curved lines instead of directly connecting the dots with straight lines.  
+To do so, set the property `enableBezierCurve` to YES. 
+
+	self.myGraph.enableBezierCurve = YES;
+
 ### Line Customization
 Two delegate methods on the `BEMSimpleLineGraphDelegate` let you customize the color and alpha of a specifc line in the graph.
 

Sample Project/SimpleLineChart/SimpleLineChart-Info.plist

@@ -33,8 +33,6 @@
 	<key>UISupportedInterfaceOrientations</key>
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
 </dict>
 </plist>

Sample Project/SimpleLineChart/ViewController.m

@@ -51,6 +51,7 @@ - (void)viewDidLoad {
     self.myGraph.colorXaxisLabel = [UIColor whiteColor];
     self.myGraph.widthLine = 3.0;
     self.myGraph.enableTouchReport = YES;
+    self.myGraph.enableBezierCurve = YES;
 
     // The labels to report the values of the graph when the user touches it
     self.labelValues.text = [NSString stringWithFormat:@"%i", [[self.myGraph calculatePointValueSum] intValue]];