Merge pull request #855 from ara818/flexible_grid_borders2

Support different border color and widths for each side of the chart.
flot · Nov 11, 2012 · c857351 · c857351
2 parents 95030b9 + 5fcb64f
commit c857351
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 14 deletions.
diff --git a/API.md b/API.md
@@ -790,8 +790,8 @@ grid: {
     labelMargin: number
     axisMargin: number
     markings: array of markings or (fn: axes -> array of markings)
-    borderWidth: number
-    borderColor: color or null
+    borderWidth: number or object with "top", "right", "bottom" and "left" properties with different widths
+    borderColor: color or null or object with "top", "right", "bottom" and "left" properties with different colors
     minBorderMargin: number or null
     clickable: boolean
     hoverable: boolean
@@ -833,12 +833,14 @@ line, and "axisMargin" is the space in pixels between axes when there
 are two next to each other.
 
 "borderWidth" is the width of the border around the plot. Set it to 0
-to disable the border. You can also set "borderColor" if you want the
-border to have a different color than the grid lines.
-"minBorderMargin" controls the default minimum margin around the
-border - it's used to make sure that points aren't accidentally
-clipped by the canvas edge so by default the value is computed from
-the point radius.
+to disable the border. Set it to an object with "top", "right",
+"bottom" and "left" properties to use different widths. You can
+also set "borderColor" if you want the border to have a different color
+than the grid lines. Set it to an object with "top", "right", "bottom"
+and "left" properties to use different colors. "minBorderMargin" controls
+the default minimum margin around the border - it's used to make sure
+that points aren't accidentally clipped by the canvas edge so by default
+the value is computed from the point radius.
 
 "markings" is used to draw simple lines and rectangular areas in the
 background of the plot. You can either specify an array of ranges on

diff --git a/jquery.flot.js b/jquery.flot.js
@@ -1110,8 +1110,14 @@
 
             // If the grid is visible, add its border width to the offset
 
-            for (var a in plotOffset)
-                plotOffset[a] += showGrid ? options.grid.borderWidth : 0;
+            for (var a in plotOffset) {
+                if(typeof(options.grid.borderWidth) == "object") {
+                    plotOffset[a] = showGrid ? options.grid.borderWidth[a] : 0;
+                }
+                else {
+                    plotOffset[a] = showGrid ? options.grid.borderWidth : 0;
+                }
+            }
 
             // init axes
             $.each(axes, function (_, axis) {
@@ -1573,7 +1579,8 @@
 
                     if (v < axis.min || v > axis.max
                         // skip those lying on the axes if we got a border
-                        || (t == "full" && bw > 0
+                        || (t == "full"
+                            && ((typeof bw == "object" && bw[axis.position] > 0) || bw > 0)
                             && (v == axis.min || v == axis.max)))
                         continue;
 
@@ -1609,9 +1616,43 @@
 
             // draw border
             if (bw) {
-                ctx.lineWidth = bw;
-                ctx.strokeStyle = options.grid.borderColor;
-                ctx.strokeRect(-bw/2, -bw/2, plotWidth + bw, plotHeight + bw);
+                // If either borderWidth or borderColor is an object, then draw the border
+                // line by line instead of as one rectangle
+                bc = options.grid.borderColor;
+                if(typeof bw == "object" || typeof bc == "object") {
+                    ctx.beginPath();
+                    ctx.strokeStyle = (typeof bc == "object" ? bc.top : bc);
+                    ctx.lineWidth = (typeof bw == "object" ? bw.top : bw);
+                    ctx.moveTo(0 - bw.left, 0 - bw.top/2);
+                    ctx.lineTo(plotWidth, 0 - bw.top/2);
+                    ctx.stroke();
+
+                    ctx.beginPath();
+                    ctx.strokeStyle = (typeof bc == "object" ? bc.right : bc);
+                    ctx.lineWidth = (typeof bw == "object" ? bw.right : bw)
+                    ctx.moveTo(plotWidth + bw.right / 2, 0 - bw.top);
+                    ctx.lineTo(plotWidth + bw.right / 2, plotHeight);
+                    ctx.stroke();
+
+                    ctx.beginPath();
+                    ctx.strokeStyle = (typeof bc == "object" ? bc.bottom : bc);
+                    ctx.lineWidth = (typeof bw == "object" ? bw.bottom : bw)
+                    ctx.moveTo(plotWidth + bw.right, plotHeight + bw.bottom / 2);
+                    ctx.lineTo(0, plotHeight + bw.bottom / 2);
+                    ctx.stroke();
+
+                    ctx.beginPath();
+                    ctx.strokeStyle = (typeof bc == "object" ? bc.left : bc);
+                    ctx.lineWidth = (typeof bw == "object" ? bw.left : bw)
+                    ctx.moveTo(0 - bw.left/2, plotHeight + bw.bottom);
+                    ctx.lineTo(0- bw.left/2, 0);
+                    ctx.stroke();
+                }
+                else {
+                    ctx.lineWidth = bw;
+                    ctx.strokeStyle = options.grid.borderColor;
+                    ctx.strokeRect(-bw/2, -bw/2, plotWidth + bw, plotHeight + bw);
+                }
             }
 
             ctx.restore();