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,10 +345,16 @@
                 }
 
                 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;
-                    xmin += delta;
+                    if(s.bars.horizontal) {
-                    xmax += delta + s.bars.barWidth;
+                        ymin += delta;
+                        ymax += delta + s.bars.barWidth;
+                    }
+                    else {
+                        xmin += delta;
+                        xmax += delta + s.bars.barWidth;
+                    }
                 }
                 
                 axisx.datamin = Math.min(axisx.datamin, xmin);
@@ -1458,20 +1465,43 @@
             ctx.restore();
         }
 
-        function drawBar(x, y, barLeft, barRight, offset, fillStyleCallback, axisx, axisy, c) {
+        function drawBar(x, y, barLeft, barRight, offset, fillStyleCallback, axisx, axisy, c, horizontal) {
-            var drawLeft = true, drawRight = true,
+            var left, right, bottom, top,
-                drawTop = true, drawBottom = false,
+                drawLeft, drawRight, drawTop, drawBottom;
-                left = x + barLeft, right = x + barRight,
+
-                bottom = 0, top = y;
+            if (horizontal) {
-
+                drawBottom = drawRight = drawTop = true;
-            // account for negative bars
+                drawLeft = false;
-            if (top < bottom) {
+                left = 0;
-                top = 0;
+                right = x;
-                bottom = y;
+                top = y + barLeft;
-                drawBottom = true;
+                bottom = y + barRight;
-                drawTop = false;
+
+                // 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) {
+                    top = 0;
+                    bottom = y;
+                    drawBottom = true;
+                    drawTop = false;
+                }
+            }
+           
             // clip
             if (right < axisx.min || left > axisx.max ||
                 top < axisy.min || bottom > axisy.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,10 +1744,13 @@
                         if (x == null)
                             continue;
   
-                        // For a bar graph, the cursor must be inside the bar
+                        // for a bar graph, the cursor must be inside the bar
-                        if (mx >= x + barLeft && mx <= x + barRight &&
+                        if (series[i].bars.horizontal ? 
-                            my >= Math.min(0, y) && my <= Math.max(0, y))
+                            (mx <= Math.max(0, x) && mx >= Math.min(0, x) && 
-                            item = [i, j / incr];
+                             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) {