Added support for gradients, currently only used for the grid background

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

API.txt

@@ -472,7 +472,7 @@ Customizing the grid
 
   grid: {
     color: color
-    backgroundColor: color or null
+    backgroundColor: color/gradient or null
     tickColor: color
     labelMargin: number
     markings: array of markings or (fn: axes -> array of markings)
@@ -484,13 +484,11 @@ Customizing the grid
     mouseActiveRadius: number
   }
 
-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 should only need to set
-backgroundColor if you want the grid area to be a different color from the
-page color. Otherwise you might as well just set the background color
-of the page with CSS.
+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.
 
 "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
@@ -638,6 +636,24 @@ vertical crosshair that lets you trace the values on the x axis, "y"
 enables a horizontal crosshair and "xy" enables them both.
 
 
+Specifying gradients
+====================
+
+A gradient is specified like this:
+
+  { colors: [ color1, color2, ... ] }
+
+For instance, you might specify a background on the grid going from
+black to gray like this:
+
+  grid: {
+    backgroundColor: { colors: ["#000", "#999"] }
+  }
+
+Flot currently only supports vertical gradients drawn from top to
+bottom because that's what works with IE.
+
+
 Plot Methods
 ------------
 

NEWS.txt

@@ -25,8 +25,12 @@ Changes:
   $.plot.formatDate(...) (suggestion by Matt Manela) and even
   replaced.
 
-- Added "borderColor" option to the grid (patch from achamayou and
-  patch from Mike R. Williamson).
+- Added "borderColor" option to the grid (patch from Amaury Chamayoau
+  and patch from Mike R. Williamson).
+
+- Added support for gradient background for the grid, take a look at
+  the "setting options" example (based on patch from Amaury Chamayou,
+  issue 90).
   
 Bug fixes:
 

examples/setting-options.html

@@ -53,7 +53,7 @@ $(function () {
             max: 2
         },
         grid: {
-            backgroundColor: "#fffaff"
+            backgroundColor: { colors: ["#fff", "#eee"] }
         }
     });
 });

jquery.flot.js

@@ -858,7 +858,7 @@
 
             // draw background, if any
             if (options.grid.backgroundColor) {
-                ctx.fillStyle = options.grid.backgroundColor;
+                ctx.fillStyle = getColorOrGradient(options.grid.backgroundColor);
                 ctx.fillRect(0, 0, plotWidth, plotHeight);
             }
 
@@ -1522,7 +1522,7 @@
                     var c = options.legend.backgroundColor;
                     if (c == null) {
                         var tmp;
-                        if (options.grid.backgroundColor)
+                        if (options.grid.backgroundColor && typeof options.grid.backgroundColor == "string")
                             tmp = options.grid.backgroundColor;
                         else
                             tmp = extractColor(legend);
@@ -2015,6 +2015,22 @@
             return Math.abs(selection.second.x - selection.first.x) >= minSize &&
                 Math.abs(selection.second.y - selection.first.y) >= minSize;
         }
+        
+        function getColorOrGradient(spec) {
+            if (typeof spec == "string")
+                return spec;
+            else {
+                // assume this is a gradient spec; IE currently only
+                // supports a simple vertical gradient properly, so that's
+                // what we support too
+                var gradient = ctx.createLinearGradient(0, 0, 0, plotHeight);
+                
+                for (var i = 0, l = spec.colors.length; i < l; ++i)
+                    gradient.addColorStop(i / (l - 1), spec.colors[i]);
+                
+                return gradient;
+            }
+        }
     }
     
     $.plot = function(target, data, options) {