Horizontal bars, based on patch from Jason LeBrun

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

API.txt

@@ -421,6 +421,7 @@ Customizing the data series
   bars: {
     barWidth: number
     align: "left" or "center"
+    horizontal: boolean
   }
 
   lines: {
@@ -466,7 +467,11 @@ 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. "align" specifies whether
 a bar should be left-aligned (default) or centered on top of the value
-it represents.
+it represents. When "horizontal" is on, the bars are drawn
+horizontally, i.e. from the y axis instead of the x axis; note that
+the bar end points are still defined in the same way so you'll
+probably want to swap the coordinates if you've been plotting vertical
+bars first.
 
 For lines, "steps" specifies whether two adjacent data points are
 connected with a straight (possibly diagonal) line or with first a

NEWS.txt

@@ -56,6 +56,8 @@ Changes:
 - The legend labelFormatter now passes the series in addition to just
   the label (suggestion by Vincent Lemeltier).
 
+- Horizontal bars (based on patch by Jason LeBrun).
+
 Bug fixes:
 
 - Fixed two corner-case bugs when drawing filled curves (report and

jquery.flot.js

@@ -73,7 +73,8 @@
                     barWidth: 1, // in units of the x axis
                     fill: true,
                     fillColor: null,
-                    align: "left" // or "center"
+                    align: "left", // or "center" 
+                    horizontal: false // when horizontal, left is now top
                 },
                 threshold: null, // or { below: number, color: color spec}
                 grid: {
@@ -344,11 +345,17 @@
                 }
 
                 if (s.bars.show) {
-                    // make sure we got room for the bar
+                    // make sure we got room for the bar on the dancing floor
                     var delta = s.bars.align == "left" ? 0 : -s.bars.barWidth/2;
+                    if(s.bars.horizontal) {
+                        ymin += delta;
+                        ymax += delta + s.bars.barWidth;
+                    }
+                    else {
                         xmin += delta;
                         xmax += delta + s.bars.barWidth;
                     }
+                }
                 
                 axisx.datamin = Math.min(axisx.datamin, xmin);
                 axisx.datamax = Math.max(axisx.datamax, xmax);
@@ -1458,11 +1465,33 @@
             ctx.restore();
         }
 
-        function drawBar(x, y, barLeft, barRight, offset, fillStyleCallback, axisx, axisy, c) {
-            var drawLeft = true, drawRight = true,
-                drawTop = true, drawBottom = false,
-                left = x + barLeft, right = x + barRight,
-                bottom = 0, top = y;
+        function drawBar(x, y, barLeft, barRight, offset, fillStyleCallback, axisx, axisy, c, horizontal) {
+            var left, right, bottom, top,
+                drawLeft, drawRight, drawTop, drawBottom;
+
+            if (horizontal) {
+                drawBottom = drawRight = drawTop = true;
+                drawLeft = false;
+                left = 0;
+                right = x;
+                top = y + barLeft;
+                bottom = y + barRight;
+
+                // account for negative bars
+                if (right < left) {
+                    right = 0;
+                    left = x;
+                    drawLeft = true;
+                    drawRight = false;
+                }
+            }
+            else {
+                drawLeft = drawRight = drawTop = true;
+                drawBottom = false;
+                left = x + barLeft;
+                right = x + barRight;
+                bottom = 0;
+                top = y;
 
                 // account for negative bars
                 if (top < bottom) {
@@ -1471,6 +1500,7 @@
                     drawBottom = true;
                     drawTop = false;
                 }
+            }
            
             // clip
             if (right < axisx.min || left > axisx.max ||
@@ -1546,7 +1576,7 @@
                 for (var i = 0; i < points.length; i += incr) {
                     if (points[i] == null)
                         continue;
-                    drawBar(points[i], points[i + 1], barLeft, barRight, offset, fillStyleCallback, axisx, axisy, ctx);
+                    drawBar(points[i], points[i + 1], barLeft, barRight, offset, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal);
                 }
             }
 
@@ -1714,9 +1744,12 @@
                         if (x == null)
                             continue;
   
-                        // For a bar graph, the cursor must be inside the bar
-                        if (mx >= x + barLeft && mx <= x + barRight &&
-                            my >= Math.min(0, y) && my <= Math.max(0, y))
+                        // for a bar graph, the cursor must be inside the bar
+                        if (series[i].bars.horizontal ? 
+                            (mx <= Math.max(0, x) && mx >= Math.min(0, x) && 
+                             my >= y + barLeft && my <= y + barRight) :
+                            (mx >= x + barLeft && mx <= x + barRight &&
+                             my >= Math.min(0, y) && my <= Math.max(0, y)))
                                 item = [i, j / incr];
                     }
                 }
@@ -1988,7 +2021,7 @@
             var fillStyle = parseColor(series.color).scale(1, 1, 1, 0.5).toString();
             var barLeft = series.bars.align == "left" ? 0 : -series.bars.barWidth/2;
             drawBar(point[0], point[1], barLeft, barLeft + series.bars.barWidth,
-                    0, function () { return fillStyle; }, series.xaxis, series.yaxis, octx);
+                    0, function () { return fillStyle; }, series.xaxis, series.yaxis, octx, series.bars.horizontal);
         }
 
         function setPositionFromEvent(pos, e) {