From f28eb70f05faf80e974b957b512ee812ad483a91 Mon Sep 17 00:00:00 2001
From: "olau@iola.dk" <olau@iola.dk@1e0a6537-2640-0410-bfb7-f154510ff394>
Date: Thu, 13 Mar 2008 11:16:47 +0000
Subject: [PATCH] Make it possible to set the fill opacity by setting fill to a
 number

git-svn-id: https://flot.googlecode.com/svn/trunk@64 1e0a6537-2640-0410-bfb7-f154510ff394
---
 API.txt        | 27 ++++++++++++++++-----------
 NEWS.txt       |  3 +++
 jquery.flot.js | 25 ++++++++++++++-----------
 3 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/API.txt b/API.txt
index aba3cc6..392de58 100644
--- a/API.txt
+++ b/API.txt
@@ -348,10 +348,10 @@ Customizing the data series
 ===========================
 
   lines, points, bars: {
-    show: boolean,
-    lineWidth: number,
-    fill: boolean,
-    fillColor: color or null
+    show: boolean
+    lineWidth: number
+    fill: boolean or number
+    fillColor: color
   }
 
   points: {
@@ -376,14 +376,19 @@ and Flot will happily draw each of them in turn, e.g.
     points: { show: true, fill: false }
   };
 
-"lineWidth" is the thickness of the line or outline and "fill" is
-whether the shape should be filled. For lines, this produces area
-graphs. If "fillColor" is null (default), the color for the data
-series is used.
+"lineWidth" is the thickness of the line or outline in pixels.
+
+"fill" is whether the shape should be filled. For lines, this produces
+area graphs. You can use "fillColor" to specify the color of the fill.
+If "fillColor" evaluates to false (default for everything except
+points), the fill color is auto-set to the color of the data series.
+You can adjust the opacity of the fill by setting fill to a number
+between 0 (fully transparent) and 1 (fully opaque).
 
-Note that the options that take numbers works in units of pixels, but
-"barWidth" is the width of the bars in units of the x axis (e.g. for
-time series it's in milliseconds).
+"barWidth" is the width of the bars in units of the x axis, contrary
+to most other measures that are specified in pixels. For instance, for
+time series the unit is milliseconds so 24 * 60 * 60 * 1000 produces
+bars with the width of a day.
 
 The "colors" array specifies a default color theme to get colors for
 the data series from. You can specify as many colors as you like, like
diff --git a/NEWS.txt b/NEWS.txt
index 4bab315..9ec525f 100644
--- a/NEWS.txt
+++ b/NEWS.txt
@@ -5,6 +5,9 @@ Added support for specifying the size of tick labels (axis.labelWidth,
 axis.labelHeight). Useful for specifying a max label size to keep
 multiple plots aligned.
 
+The "fill" option can now be a number that specifies the opacity of
+the fill.
+
 Fixed a bug in calculating spacing around the plot (reported by
 timothytoe). Fixed a bug in finding max values for all-negative data
 sets. Prevent the possibility of eternal looping in tick calculations.
diff --git a/jquery.flot.js b/jquery.flot.js
index 44a6cf1..c95e65c 100644
--- a/jquery.flot.js
+++ b/jquery.flot.js
@@ -784,7 +784,7 @@
             ctx.translate(plotOffset.left, plotOffset.top);
 
             // draw background, if any
-            if (options.grid.backgroundColor != null) {
+            if (options.grid.backgroundColor) {
                 ctx.fillStyle = options.grid.backgroundColor;
                 ctx.fillRect(0, 0, plotWidth, plotHeight);
             }
@@ -1141,11 +1141,9 @@
 
             ctx.lineWidth = lw;
             ctx.strokeStyle = series.color;
-            if (series.lines.fill) {
-                ctx.fillStyle = series.lines.fillColor != null ? series.lines.fillColor : parseColor(series.color).scale(null, null, null, 0.4).toString();
+            setFillStyle(series.lines, series.color);
+            if (series.lines.fill)
                 plotLineArea(series.data, 0);
-            }
-
             plotLine(series.data, 0);
             ctx.restore();
         }
@@ -1200,7 +1198,7 @@
 
             ctx.lineWidth = series.points.lineWidth;
             ctx.strokeStyle = series.color;
-            ctx.fillStyle = series.points.fillColor != null ? series.points.fillColor : series.color;
+            setFillStyle(series.points, series.color);
             plotPoints(series.data, series.points.radius, series.points.fill);
             ctx.restore();
         }
@@ -1291,14 +1289,19 @@
 
             ctx.lineWidth = lw;
             ctx.strokeStyle = series.color;
-            if (series.bars.fill) {
-                ctx.fillStyle = series.bars.fillColor != null ? series.bars.fillColor : parseColor(series.color).scale(null, null, null, 0.4).toString();
-            }
-
+            setFillStyle(series.bars, series.color);
             plotBars(series.data, bw, 0, series.bars.fill);
             ctx.restore();
         }
 
+        function setFillStyle(obj, seriesColor) {
+            var fill = obj.fill;
+            if (fill) {
+                ctx.fillStyle = obj.fillColor ? obj.fillColor : parseColor(seriesColor).scale(null, null, null, typeof fill == "number" ? fill : 0.4).toString();
+            }
+            
+        }
+        
         function insertLegend() {
             target.find(".legend").remove();
 
@@ -1352,7 +1355,7 @@
                         var c = options.legend.backgroundColor;
                         if (c == null) {
                             var tmp;
-                            if (options.grid.backgroundColor != null)
+                            if (options.grid.backgroundColor)
                                 tmp = options.grid.backgroundColor;
                             else
                                 tmp = extractColor(legend);