From b993ceef1b89ed3fa9d15798b65df06e46b79afb Mon Sep 17 00:00:00 2001 From: "olau@iola.dk" Date: Sun, 8 Mar 2009 20:56:40 +0000 Subject: [PATCH] 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 | 7 ++++- NEWS.txt | 2 ++ jquery.flot.js | 79 +++++++++++++++++++++++++++++++++++--------------- 3 files changed, 64 insertions(+), 24 deletions(-) diff --git a/API.txt b/API.txt index 91ecefc..c44835e 100644 --- a/API.txt +++ b/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 diff --git a/NEWS.txt b/NEWS.txt index 69a7f1b..7b793f7 100644 --- a/NEWS.txt +++ b/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 diff --git a/jquery.flot.js b/jquery.flot.js index 03fcc56..cafe41c 100644 --- a/jquery.flot.js +++ b/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; - xmax += delta + s.bars.barWidth; + 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); @@ -1458,20 +1465,43 @@ 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; - - // account for negative bars - if (top < bottom) { - top = 0; - bottom = y; - drawBottom = true; - drawTop = false; + 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) { + 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 - if (mx >= x + barLeft && mx <= x + barRight && - my >= Math.min(0, y) && my <= Math.max(0, y)) - item = [i, j / incr]; + // 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) {