Merge pull request #7 from swapnil1104/horizontal_guidelines

Horizontal guidelines

Author: swapnil1104

README.md

@@ -10,6 +10,8 @@ A highly customizable and performant custom view to render curved line graph.
 ![Animation with straight & curved](documentation/images/straight_curved_demo.gif)
 ![Animation with opaque color](documentation/images/animation_demo2.gif)
 ![Animated and non animated graph](documentation/images/static_dynamic_graph_demo.gif)
+![Horizontal guidelines](documentation/images/horizontal_guidelines.png)
+
 ## Packed with features
 - Add multiple line graphs within one graph plane.
 - Extensible styling options.
@@ -51,16 +53,17 @@ Step 3. Add CurveGraphView to your layout file
 curveGraphView = findViewById(R.id.cgv);
 
 curveGraphView.configure(
-        new CurveGraphConfig.Builder(this)
-                .setAxisColor(R.color.Blue)                                             // Set X and Y axis line color stroke.
-                .setIntervalDisplayCount(7)                                             // Set number of values to be displayed in X ax
-                .setGuidelineCount(2)                                                   // Set number of background guidelines to be shown.
-                .setGuidelineColor(R.color.GreenYellow)                                 // Set color of the visible guidelines.
-                .setNoDataMsg(" No Data ")                                              // Message when no data is provided to the view.
-                .setxAxisScaleTextColor(R.color.Black)                                  // Set X axis scale text color.
-                .setyAxisScaleTextColor(R.color.Black)                                  // Set Y axis scale text color
-                .build()
-        ););
+    new CurveGraphConfig.Builder(this)
+            .setAxisColor(R.color.Blue)                                             // Set number of values to be displayed in X ax
+            .setVerticalGuideline(4)                                                // Set number of background guidelines to be shown.
+            .setHorizontalGuideline(2)
+            .setGuidelineColor(R.color.Red)                                         // Set color of the visible guidelines.
+            .setNoDataMsg(" No Data ")                                              // Message when no data is provided to the view.
+            .setxAxisScaleTextColor(R.color.Black)                                  // Set X axis scale text color.
+            .setyAxisScaleTextColor(R.color.Black)                                  // Set Y axis scale text color
+            .setAnimationDuration(2000)                                             // Set Animation Duration
+            .build()
+);
 ```
 ## How to provide data to the view.
 ### Create PointMap object

app/src/main/java/com/broooapps/curvegraphview/MainActivity.java

@@ -25,8 +25,9 @@ protected void onCreate(Bundle savedInstanceState) {
 
         curveGraphView.configure(
                 new CurveGraphConfig.Builder(this)
-                        .setAxisColor(R.color.Blue)                                            // Set number of values to be displayed in X ax
-                        .setGuidelineCount(4)                                                   // Set number of background guidelines to be shown.
+                        .setAxisColor(R.color.Blue)                                             // Set number of values to be displayed in X ax
+                        .setVerticalGuideline(4)                                                // Set number of background guidelines to be shown.
+                        .setHorizontalGuideline(2)
                         .setGuidelineColor(R.color.Red)                                         // Set color of the visible guidelines.
                         .setNoDataMsg(" No Data ")                                              // Message when no data is provided to the view.
                         .setxAxisScaleTextColor(R.color.Black)                                  // Set X axis scale text color.
@@ -49,7 +50,6 @@ protected void onCreate(Bundle savedInstanceState) {
                 .animateLine(true)
                 .setPointColor(R.color.Red)
                 .setPointRadius(5)
-                .setStraightLine(true)
                 .build();
 
         PointMap p2 = new PointMap();

app/src/main/res/values/colors.xml

@@ -4,10 +4,10 @@
     <color name="colorPrimaryDark">#00574B</color>
     <color name="colorAccent">#D81B60</color>
 
-    <color name="gradientStartColor">#C34DD0</color>
-    <color name="gradientEndColor">#4A4DD0</color>
-    <color name="gradientStartColor2">#FFC400</color>
-    <color name="gradientEndColor2">#B2FF59</color>
+    <color name="gradientStartColor">#BF4A4DD0</color>
+    <color name="gradientEndColor">#ADC34DD0</color>
+    <color name="gradientStartColor2">#A9304FFE</color>
+    <color name="gradientEndColor2">#DA1976D2</color>
 
 
 </resources>

documentation/images/horizontal_guidelines.png

@@ -24,6 +24,8 @@ public class CurveGraphConfig {
 
     int guidelineCount;
 
+    int horizontalGuidelineCount;
+
     int intervalCount;
 
     long animationDuration;
@@ -37,6 +39,7 @@ private CurveGraphConfig(Builder builder) {
         axisColor = (builder.axisColor == 0) ? ContextCompat.getColor(builder.ctxWeakRef.get(), R.color.axisColor) : builder.axisColor;
         intervalCount = builder.intervalCount;
         guidelineCount = builder.guidelineCount;
+        horizontalGuidelineCount = builder.horizontalGuidelineCount;
         noDataMsg = (builder.noDataMsg == null) ? "NO DATA" : builder.noDataMsg;
         animationDuration = builder.animationDuration;
         builder.ctxWeakRef.clear();
@@ -61,6 +64,8 @@ public static class Builder {
 
         int intervalCount = 0;
 
+        int horizontalGuidelineCount = 0;
+
         long animationDuration = 2000;
 
         String noDataMsg = null;
@@ -77,11 +82,16 @@ public Builder setNoDataMsg(String message) {
             return this;
         }
 
-        public Builder setGuidelineCount(int count) {
+        public Builder setVerticalGuideline(int count) {
             this.guidelineCount = count;
             return this;
         }
 
+        public Builder setHorizontalGuideline(int count) {
+            this.horizontalGuidelineCount = count;
+            return this;
+        }
+
         public Builder setGuidelineColor(int colorRes) {
             this.guidelineColor = ContextCompat.getColor(ctxWeakRef.get(), colorRes);
             return this;

graphview/src/main/java/com/broooapps/graphview/CurveGraphConfig.java

@@ -38,15 +38,17 @@ public class CurveGraphView extends View {
     DecimalFormat df = new DecimalFormat("#######.##");
 
     // Builder fields
-    private int guidelineCount;
+    private int verticalGuidelineCount;
     private int intervalCount;
+    private int horizontalGuidelineCount;
 
     private GraphData[] graphDataArray = {};
 
     int viewHeight, viewWidth;
     int graphHeight, graphWidth, graphPadding = 32;
 
-    private Path path = new Path();
+    private Path vPath = new Path();
+    private Path hPath = new Path();
 
     private Paint xAxisScalePaint;
     private Paint yAxisScalePaint;
@@ -132,7 +134,8 @@ public void configure(CurveGraphConfig builder) {
             yAxis = new RectF(0, 0, 0, 0);
         }
         this.noDataMsg = builder.noDataMsg;
-        this.guidelineCount = builder.guidelineCount;
+        this.verticalGuidelineCount = builder.guidelineCount;
+        this.horizontalGuidelineCount = builder.horizontalGuidelineCount;
         this.intervalCount = builder.intervalCount;
 
         xAxisScalePaint.setTextSize(28f);
@@ -228,7 +231,10 @@ public void onAnimationRepeat(Animator animation) {
     protected void onDraw(Canvas canvas) {
         super.onDraw(canvas);
         drawAxis(canvas);
-        drawGuideline(canvas);
+        if (!(graphDataArray.length == 0 || noDataInGraph())) {
+            drawVertGuideline(canvas);
+            drawHorizontalGuidelines(canvas);
+        }
         drawScaleText(canvas);
         drawInterval(canvas);
 
@@ -253,21 +259,31 @@ private void drawInterval(Canvas canvas) {
         }
     }
 
-    private void drawGuideline(Canvas canvas) {
-        if (drawGuideline()) return;
-        for (int i = 1; i <= guidelineCount; i++) {
-            path.reset();
+    private void drawVertGuideline(Canvas canvas) {
+        if (verticalGuidelineCount == 0) return;
+        for (int i = 1; i <= verticalGuidelineCount; i++) {
+            vPath.reset();
 
-            int xPos = (i * (graphWidth - (graphPadding) * 2)) / (guidelineCount + 1);
-            path.moveTo(xPos, graphPadding);
-            path.lineTo(xPos, yAxis.top);
+            int xPos = (i * (graphWidth - (graphPadding) * 2)) / (verticalGuidelineCount + 1);
+            vPath.moveTo(xPos, graphPadding);
+            vPath.lineTo(xPos, yAxis.top);
 
-            canvas.drawPath(path, guidelinePaint);
+            canvas.drawPath(vPath, guidelinePaint);
         }
     }
 
-    private boolean drawGuideline() {
-        return guidelineCount == 0 || graphDataArray.length == 0 || noDataInGraph();
+
+    private void drawHorizontalGuidelines(Canvas canvas) {
+        if (horizontalGuidelineCount == 0) return;
+        for (int i = 1; i <= horizontalGuidelineCount; i++) {
+            hPath.reset();
+
+            int yPos = (i * graphHeight - graphPadding) / (horizontalGuidelineCount + 1);
+            hPath.moveTo(graphPadding, yPos);
+            hPath.lineTo(graphWidth - graphPadding, yPos);
+
+            canvas.drawPath(hPath, guidelinePaint);
+        }
     }
 
     private boolean noDataInGraph() {