Option to have the grid on top of the data, important for image plots, and a...

Option to have the grid on top of the data, important for image plots, and a bug fix, patch by Paul Kienzle

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

API.txt

@@ -507,6 +507,7 @@ Customizing the grid
 
   grid: {
     show: boolean
+    aboveData: boolean
     color: color
     backgroundColor: color/gradient or null
     tickColor: color
@@ -524,8 +525,11 @@ The grid is the thing with the axes and a number of ticks. "color" is
 the color of the grid itself whereas "backgroundColor" specifies the
 background color inside the grid area. The default value of null means
 that the background is transparent. You can also set a gradient, see
-the gradient documentation below. You can turn off the whole grid
-including tick labels by setting "show" to false.
+the gradient documentation below.
+
+You can turn off the whole grid including tick labels by setting
+"show" to false. "aboveData" determines whether the grid is drawn on
+above the data or below (below is default).
 
 "tickColor" is the color of the ticks and "labelMargin" is the spacing
 between tick labels and the grid. Note that you can style the tick
@@ -1013,7 +1017,7 @@ Currently available hooks (when in doubt, check the Flot source):
    crosshair plugin for an example.
 
 
-
+   
 Plugins
 -------
 

NEWS.txt

@@ -109,6 +109,8 @@ Changes:
 
 - Navigation plugin for panning and zooming a plot.
 
+- More configurable grid.
+
   
 Bug fixes:
 
@@ -149,7 +151,7 @@ Bug fixes:
 - Made the heuristic for determining how many ticks to aim for a bit
   smarter.
 - Fix for uneven axis margins (report and patch by Paul Kienzle) and
-  snapping to ticks.
+  snapping to ticks (concurrent report and patch by lifthrasiir).
 
 Flot 0.5
 --------

jquery.flot.js

@@ -81,9 +81,10 @@
                 },
                 grid: {
                     show: true,
+                    aboveData: false,
                     color: "#545454", // primary color used for outline and labels
                     backgroundColor: null, // null for transparent, else color
-                    tickColor: "#dddddd", // color used for the ticks
+                    tickColor: "rgba(0,0,0,0.15)", // color used for the ticks
                     labelMargin: 5, // in pixels
                     borderWidth: 2, // in pixels
                     borderColor: null, // set if different from the grid color
@@ -1015,13 +1016,20 @@
         }
       
         function draw() {
-            if (options.grid.show)
+            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+
+            var grid = options.grid;
+            
+            if (grid.show && !grid.aboveData)
                 drawGrid();
 
             for (var i = 0; i < series.length; ++i)
                 drawSeries(series[i]);
 
             executeHooks(hooks.draw, [ctx]);
+            
+            if (grid.show && grid.aboveData)
+                drawGrid();
         }
 
         function extractRange(ranges, coord) {
@@ -1057,7 +1065,6 @@
             var i;
             
             ctx.save();
-            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
             ctx.translate(plotOffset.left, plotOffset.top);
 
             // draw background, if any