From 3360d2747b7945433609fcd8fc8581c626c526fe Mon Sep 17 00:00:00 2001
From: "olau@iola.dk" <olau@iola.dk@1e0a6537-2640-0410-bfb7-f154510ff394>
Date: Thu, 6 Aug 2009 17:05:36 +0000
Subject: [PATCH] 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        | 10 +++++++---
 NEWS.txt       |  4 +++-
 jquery.flot.js | 13 ++++++++++---
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/API.txt b/API.txt
index c196559..22787dc 100644
--- a/API.txt
+++ b/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
 -------
 
diff --git a/NEWS.txt b/NEWS.txt
index f7536cf..9f8173f 100644
--- a/NEWS.txt
+++ b/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
 --------
diff --git a/jquery.flot.js b/jquery.flot.js
index fec4b2b..7d94cb1 100644
--- a/jquery.flot.js
+++ b/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