Add option to toggle grid vertical/horizontal lines

diff --git a/src/Chart.Bar.js b/src/Chart.Bar.js
index fafe74a49d85fefc7848a99af9e3f980ec342332..87fb26ddc405267419abcaa749b76435ee3340cc 100644 (file)
--- a/src/Chart.Bar.js
+++ b/src/Chart.Bar.js
@@ -19,6 +19,12 @@
                //Number - Width of the grid lines
                scaleGridLineWidth : 1,
 
+               //Boolean - Whether to show horizontal lines (except X axis)
+               scaleShowHorizontalLines: true,
+
+               //Boolean - Whether to show vertical lines (except Y axis)
+               scaleShowVerticalLines: true,
+
                //Boolean - If there is a stroke on each bar
                barShowStroke : true,
 
@@ -206,6 +212,8 @@
                                font : helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
                                lineWidth : this.options.scaleLineWidth,
                                lineColor : this.options.scaleLineColor,
+                               showHorizontalLines : this.options.scaleShowHorizontalLines,
+                               showVerticalLines : this.options.scaleShowVerticalLines,
                                gridLineWidth : (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0,
                                gridLineColor : (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
                                padding : (this.options.showScale) ? 0 : (this.options.barShowStroke) ? this.options.barStrokeWidth : 0,
@@ -291,4 +299,4 @@
        });
 
 
-}).call(this);
\ No newline at end of file
+}).call(this);

diff --git a/src/Chart.Core.js b/src/Chart.Core.js
index 03b99b45a582e69ae57ea79f3ed3e5bbae3bb0d1..e514ccf706a7c020f212a19bfb055ff3a58b63fb 100755 (executable)
--- a/src/Chart.Core.js
+++ b/src/Chart.Core.js
@@ -1560,14 +1560,24 @@
                                ctx.font = this.font;
                                each(this.yLabels,function(labelString,index){
                                        var yLabelCenter = this.endPoint - (yLabelGap * index),
-                                               linePositionY = Math.round(yLabelCenter);
+                                               linePositionY = Math.round(yLabelCenter),
+                                               drawHorizontalLine = this.showHorizontalLines;
 
                                        ctx.textAlign = "right";
                                        ctx.textBaseline = "middle";
                                        if (this.showLabels){
                                                ctx.fillText(labelString,xStart - 10,yLabelCenter);
                                        }
-                                       ctx.beginPath();
+
+                                       // This is X axis, so draw it
+                                       if (index === 0 && !drawHorizontalLine){
+                                               drawHorizontalLine = true;
+                                       }
+
+                                       if (drawHorizontalLine){
+                                               ctx.beginPath();
+                                       }
+
                                        if (index > 0){
                                                // This is a grid line in the centre, so drop that
                                                ctx.lineWidth = this.gridLineWidth;
@@ -1580,10 +1590,12 @@
 
                                        linePositionY += helpers.aliasPixel(ctx.lineWidth);
 
-                                       ctx.moveTo(xStart, linePositionY);
-                                       ctx.lineTo(this.width, linePositionY);
-                                       ctx.stroke();
-                                       ctx.closePath();
+                                       if(drawHorizontalLine){
+                                               ctx.moveTo(xStart, linePositionY);
+                                               ctx.lineTo(this.width, linePositionY);
+                                               ctx.stroke();
+                                               ctx.closePath();
+                                       }
 
                                        ctx.lineWidth = this.lineWidth;
                                        ctx.strokeStyle = this.lineColor;
@@ -1599,9 +1611,17 @@
                                        var xPos = this.calculateX(index) + aliasPixel(this.lineWidth),
                                                // Check to see if line/bar here and decide where to place the line
                                                linePos = this.calculateX(index - (this.offsetGridLines ? 0.5 : 0)) + aliasPixel(this.lineWidth),
-                                               isRotated = (this.xLabelRotation > 0);
+                                               isRotated = (this.xLabelRotation > 0),
+                                               drawVerticalLine = this.showVerticalLines;
 
-                                       ctx.beginPath();
+                                       // This is Y axis, so draw it
+                                       if (index === 0 && !drawVerticalLine){
+                                               drawVerticalLine = true;
+                                       }
+
+                                       if (drawVerticalLine){
+                                               ctx.beginPath();
+                                       }
 
                                        if (index > 0){
                                                // This is a grid line in the centre, so drop that
@@ -1612,10 +1632,13 @@
                                                ctx.lineWidth = this.lineWidth;
                                                ctx.strokeStyle = this.lineColor;
                                        }
-                                       ctx.moveTo(linePos,this.endPoint);
-                                       ctx.lineTo(linePos,this.startPoint - 3);
-                                       ctx.stroke();
-                                       ctx.closePath();
+
+                                       if (drawVerticalLine){
+                                               ctx.moveTo(linePos,this.endPoint);
+                                               ctx.lineTo(linePos,this.startPoint - 3);
+                                               ctx.stroke();
+                                               ctx.closePath();
+                                       }
 
 
                                        ctx.lineWidth = this.lineWidth;

diff --git a/src/Chart.Line.js b/src/Chart.Line.js
index 0b3079ffe11237700a08b9d8bc232a7abd6dcda2..34ad85b4d0ae1ae96b40b506385ae42547ef6063 100644 (file)
--- a/src/Chart.Line.js
+++ b/src/Chart.Line.js
@@ -16,6 +16,12 @@
                //Number - Width of the grid lines
                scaleGridLineWidth : 1,
 
+               //Boolean - Whether to show horizontal lines (except X axis)
+               scaleShowHorizontalLines: true,
+
+               //Boolean - Whether to show vertical lines (except Y axis)
+               scaleShowVerticalLines: true,
+
                //Boolean - Whether the line is curved between points
                bezierCurve : true,
 
@@ -190,6 +196,8 @@
                                font : helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
                                lineWidth : this.options.scaleLineWidth,
                                lineColor : this.options.scaleLineColor,
+                               showHorizontalLines : this.options.scaleShowHorizontalLines,
+                               showVerticalLines : this.options.scaleShowVerticalLines,
                                gridLineWidth : (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0,
                                gridLineColor : (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
                                padding: (this.options.showScale) ? 0 : this.options.pointDotRadius + this.options.pointDotStrokeWidth,
@@ -363,4 +371,4 @@
        });
 
 
-}).call(this);
\ No newline at end of file
+}).call(this);