Added support for customizing the border width, change gridLabel to tickLabel...

Added support for customizing the border width, change gridLabel to tickLabel and mention it in the API

git-svn-id: https://flot.googlecode.com/svn/trunk@54 1e0a6537-2640-0410-bfb7-f154510ff394

API.txt

@@ -169,7 +169,7 @@ be chosen based on the minimum/maximum data values.
 
 The "autoscaleMargin" is a bit esoteric: it's the fraction of margin
 that the scaling algorithm will add to avoid that the outermost points
-ends up on the grid outline. Note that this margin is only applied
+ends up on the grid border. Note that this margin is only applied
 when a min or max value is not explicitly set. If a margin is
 specified, the plot will furthermore extend the axis end-point to the
 nearest whole tick. The default value is "null" for the x axis and
@@ -401,6 +401,7 @@ Customizing the grid
     labelMargin: number
     coloredAreas: array of areas or (fn: plot area -> array of areas)
     coloredAreasColor: color
+    borderWidth: number
     clickable: boolean
   }
 
@@ -413,8 +414,10 @@ page color. Otherwise you might as well just set the background color
 of the page with CSS.
 
 "tickColor" is the color of the ticks and "labelMargin" is the spacing
-between tick labels and the grid.
-
+between tick labels and the grid. Note that you can style the tick
+labels with CSS, e.g. to change the color. They have class "tickLabel".
+"borderWidth" is the width of the border around the plot. Set it to 0
+to disable the border.
 
 "coloredAreas" is an array of areas that will be drawn on top of the
 background. You can either specify an array of objects with { x1, y1,

NEWS.txt

@@ -28,14 +28,16 @@ parameters, the second parameter is an optional object with
 information about the axis. It has min, max, tickDecimals, tickSize.
 
 Added support for segmented lines (based on patch from Michael
-MacDonald) and for ignoring null values (suggestion from Nick
-Konidaris). 
+MacDonald) and for ignoring null and bad values (suggestion from Nick
+Konidaris and joshwaihi). 
+
+Added support for changing the border width (joebno and safoo).
+Label colors can be changed via CSS by selecting the tickLabel class.
 
 Fixed a bug in handling single-item bar series (reported by Emil
 Filipov). Fixed erratic behaviour when interacting with the plot
 with IE 7 (reported by Lau Bech Lauritzen). Prevent IE/Safari text
-selection when selecting stuff on the canvas. The data is now
-implicitly converted to 
+selection when selecting stuff on the canvas.
 
 
 

jquery.flot.js

@@ -69,6 +69,7 @@
                 backgroundColor: null, // null for transparent, else color
                 tickColor: "#dddddd", // color used for the ticks
                 labelMargin: 3, // in pixels
+                borderWidth: 2,
                 clickable: null,
                 coloredAreas: null, // array of { x1, y1, x2, y2 } or fn: plot area -> areas
                 coloredAreasColor: "#f4f4f4"
@@ -604,7 +605,7 @@
             }
 
             // measure it
-            var dummyDiv = $('<div style="position:absolute;top:-10000px;font-size:smaller" class="gridLabel">' + max_label + '</div>').appendTo(target);
+            var dummyDiv = $('<div style="position:absolute;top:-10000px;font-size:smaller" class="tickLabel">' + max_label + '</div>').appendTo(target);
             labelMaxWidth = dummyDiv.width();
             labelMaxHeight = dummyDiv.height();
             dummyDiv.remove();
@@ -721,13 +722,15 @@
             }
             ctx.stroke();
             
-            // draw outline
-            ctx.lineWidth = 2;
+            if (options.grid.borderWidth) {
+                // draw border
+                ctx.lineWidth = options.grid.borderWidth;
                 ctx.strokeStyle = options.grid.color;
                 ctx.lineJoin = "round";
                 ctx.strokeRect(0, 0, plotWidth, plotHeight);
                 ctx.restore();
             }
+        }
         
         function drawLabels() {
             var i, tick;
@@ -743,7 +746,7 @@
                 tick = xaxis.ticks[i];
                 if (!tick.label || tick.v < xaxis.min || tick.v > xaxis.max)
                     continue;
-                html += '<div style="position:absolute;top:' + (plotOffset.top + plotHeight + options.grid.labelMargin) + 'px;left:' + (plotOffset.left + tHoz(tick.v) - xBoxWidth/2) + 'px;width:' + xBoxWidth + 'px;text-align:center" class="gridLabel">' + tick.label + "</div>";
+                html += '<div style="position:absolute;top:' + (plotOffset.top + plotHeight + options.grid.labelMargin) + 'px;left:' + (plotOffset.left + tHoz(tick.v) - xBoxWidth/2) + 'px;width:' + xBoxWidth + 'px;text-align:center" class="tickLabel">' + tick.label + "</div>";
             }
             
             // do the y-axis
@@ -751,7 +754,7 @@
                 tick = yaxis.ticks[i];
                 if (!tick.label || tick.v < yaxis.min || tick.v > yaxis.max)
                     continue;
-                html += '<div style="position:absolute;top:' + (plotOffset.top + tVert(tick.v) - labelMaxHeight/2) + 'px;left:0;width:' + labelMaxWidth + 'px;text-align:right" class="gridLabel">' + tick.label + "</div>";
+                html += '<div style="position:absolute;top:' + (plotOffset.top + tVert(tick.v) - labelMaxHeight/2) + 'px;left:0;width:' + labelMaxWidth + 'px;text-align:right" class="tickLabel">' + tick.label + "</div>";
             }
 
             html += '</div>';