diff --git a/API.txt b/API.txt index 3a21b85..2809799 100644 --- a/API.txt +++ b/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 ------------ diff --git a/NEWS.txt b/NEWS.txt index c91f524..0085cc8 100644 --- a/NEWS.txt +++ b/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: diff --git a/examples/setting-options.html b/examples/setting-options.html index 31dd798..4fca496 100644 --- a/examples/setting-options.html +++ b/examples/setting-options.html @@ -53,7 +53,7 @@ $(function () { max: 2 }, grid: { - backgroundColor: "#fffaff" + backgroundColor: { colors: ["#fff", "#eee"] } } }); }); diff --git a/jquery.flot.js b/jquery.flot.js index 7e47592..d628cab 100644 --- a/jquery.flot.js +++ b/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) {