From c577ea1624e2d841cf1ba77e561502f7bfde60bc Mon Sep 17 00:00:00 2001 From: "olau@iola.dk" Date: Wed, 17 Sep 2008 23:05:08 +0000 Subject: [PATCH] Implemented centering of bars git-svn-id: https://flot.googlecode.com/svn/trunk@85 1e0a6537-2640-0410-bfb7-f154510ff394 --- API.txt | 5 ++++- NEWS.txt | 3 +++ jquery.flot.js | 20 ++++++++++++-------- 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/API.txt b/API.txt index 4b5a8b4..d48e7be 100644 --- a/API.txt +++ b/API.txt @@ -397,6 +397,7 @@ Customizing the data series bars: { barWidth: number + align: "left" or "center" } colors: [ color1, color2, ... ] @@ -425,7 +426,9 @@ between 0 (fully transparent) and 1 (fully opaque). "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. +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. 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 5740908..e532792 100644 --- a/NEWS.txt +++ b/NEWS.txt @@ -43,6 +43,9 @@ You can now specify a coordinate as null (like [2, null]) and Flot will take the other coordinate into account when scaling the axes (based on patch by joebno). +New option for bars "align". Set it to "center" to center the bars on +the value they represent. + Using the "container" option in legend now overwrites the container element instead of just appending to it (fixes infinite legend bug, reported by several people, fix by Brad Dewey). diff --git a/jquery.flot.js b/jquery.flot.js index da5c582..e8a5cf4 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -70,7 +70,8 @@ lineWidth: 2, // in pixels barWidth: 1, // in units of the x axis fill: true, - fillColor: null + fillColor: null, + align: "left" // or "center" }, grid: { color: "#545454", // primary color used for outline and labels @@ -255,8 +256,10 @@ mindelta = 0, maxdelta = 0; // make sure we got room for the bar - if (series[i].bars.show) - maxdelta = series[i].bars.barWidth; + if (series[i].bars.show) { + var mindelta = series[i].bars.align == "left" ? 0 : -series[i].bars.barWidth/2; + maxdelta = mindelta + series[i].bars.barWidth; + } axisx.used = axisy.used = true; for (var j = 0; j < data.length; ++j) { @@ -267,8 +270,8 @@ // convert to number if (x != null && !isNaN(x = +x)) { - if (x - mindelta < axisx.datamin) - axisx.datamin = x - mindelta; + if (x + mindelta < axisx.datamin) + axisx.datamin = x + mindelta; if (x + maxdelta > axisx.datamax) axisx.datamax = x + maxdelta; } @@ -1291,7 +1294,7 @@ } function drawSeriesBars(series) { - function plotBars(data, barWidth, offset, fill, axisx, axisy) { + function plotBars(data, deltaLeft, deltaRight, offset, fill, axisx, axisy) { for (var i = 0; i < data.length; i++) { if (data[i] == null) continue; @@ -1301,7 +1304,7 @@ // determine the co-ordinates of the bar, account for negative bars having // flipped top/bottom and draw/don't draw accordingly - var left = x, right = x + barWidth, bottom = (y < 0 ? y : 0), top = (y < 0 ? 0 : y); + var left = x + deltaLeft, right = x + deltaRight, bottom = (y < 0 ? y : 0), top = (y < 0 ? 0 : y); if (right < axisx.min || left > axisx.max || top < axisy.min || bottom > axisy.max) continue; @@ -1379,7 +1382,8 @@ ctx.lineWidth = series.bars.lineWidth; ctx.strokeStyle = series.color; setFillStyle(series.bars, series.color); - plotBars(series.data, series.bars.barWidth, 0, series.bars.fill, series.xaxis, series.yaxis); + var deltaLeft = series.bars.align == "left" ? 0 : -series.bars.barWidth/2; + plotBars(series.data, deltaLeft, deltaLeft + series.bars.barWidth, 0, series.bars.fill, series.xaxis, series.yaxis); ctx.restore(); }