diff --git a/API.txt b/API.txt index 671b557..fe2c3d8 100644 --- a/API.txt +++ b/API.txt @@ -564,7 +564,7 @@ Customizing the data series bars: { barWidth: number - align: "left" or "center" + align: "left", "right" or "center" horizontal: boolean } @@ -615,9 +615,9 @@ the y axis if "horizontal" is true), 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. 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 +(default), right-aligned or centered on top of the value 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. diff --git a/jquery.flot.js b/jquery.flot.js index d719714..4415e0b 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -110,7 +110,7 @@ barWidth: 1, // in units of the x axis fill: true, fillColor: null, - align: "left", // or "center" + align: "left", // "left", "right", or "center" horizontal: false }, shadowSize: 3 @@ -661,7 +661,22 @@ if (s.bars.show) { // make sure we got room for the bar on the dancing floor - var delta = s.bars.align == "left" ? 0 : -s.bars.barWidth/2; + var delta; + + switch (s.bars.align) { + case 'left': + delta = 0; + break; + case 'right': + delta = -s.bars.barWidth; + break; + case 'center': + delta = -s.bars.barWidth / 2; + break; + default: + throw 'Invalid bar alignment: ' + s.bars.align; + } + if (s.bars.horizontal) { ymin += delta; ymax += delta + s.bars.barWidth; @@ -2192,7 +2207,23 @@ // FIXME: figure out a way to add shadows (for instance along the right edge) ctx.lineWidth = series.bars.lineWidth; ctx.strokeStyle = series.color; - var barLeft = series.bars.align == "left" ? 0 : -series.bars.barWidth/2; + + var barLeft; + + switch (series.bars.align) { + case 'left': + barLeft = 0; + break; + case 'right': + barLeft = -series.bars.barWidth; + break; + case 'center': + barLeft = -series.bars.barWidth / 2; + break; + default: + throw 'Invalid bar alignment: ' + series.bars.align; + } + var fillStyleCallback = series.bars.fill ? function (bottom, top) { return getFillStyle(series.bars, series.color, bottom, top); } : null; plotBars(series.datapoints, barLeft, barLeft + series.bars.barWidth, 0, fillStyleCallback, series.xaxis, series.yaxis); ctx.restore();