Skip to content

F
flot
Commit 20fe8fdb authored by olau@iola.dk's avatar olau@iola.dk
Browse files
Options

Added special-case for highlighting bars 

git-svn-id: https://flot.googlecode.com/svn/trunk@90 1e0a6537-2640-0410-bfb7-f154510ff394
parent 5a86074f
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 92 deletions
API.txt
View file @ 20fe8fdb
...@@ -555,7 +555,8 @@ also need to listen to "mouseout" events on the placeholder div. ...@@ -555,7 +555,8 @@ also need to listen to "mouseout" events on the placeholder div.
"mouseActiveRadius" specifies how far the mouse can be from an item "mouseActiveRadius" specifies how far the mouse can be from an item
and still activate it. If there are two or more points within this and still activate it. If there are two or more points within this
radius, Flot chooses the closest item. radius, Flot chooses the closest item. For bars, the top-most bar
(from the latest specified data series) is chosen.
Customizing the selection Customizing the selection
......
NEWS.txt
View file @ 20fe8fdb
...@@ -12,9 +12,8 @@ Interactivity: added a new "plothover" event and this and the ...@@ -12,9 +12,8 @@ Interactivity: added a new "plothover" event and this and the
/david, patch by Mark Byers for bar support). See the revamped /david, patch by Mark Byers for bar support). See the revamped
"interacting with the data" example for some hints on what you can do. "interacting with the data" example for some hints on what you can do.
Highlighting: you can now highlight points and points are Highlighting: you can now highlight points and datapoints are
autohighlighted when you hover over them (if hovering is turned on). autohighlighted when you hover over them (if hovering is turned on).
Note: bars haven't been special-cased, yet.
Support for dual axis has been added (based on patch by someone who's Support for dual axis has been added (based on patch by someone who's
annoyed and /david). For each data series you can specify which axes annoyed and /david). For each data series you can specify which axes
......
jquery.flot.js
View file @ 20fe8fdb
...@@ -1293,84 +1293,90 @@ ...@@ -1293,84 +1293,90 @@
ctx.restore(); ctx.restore();
} }
function drawBar(x, y, barLeft, barRight, offset, fill, 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;
}
// clip
if (right < axisx.min || left > axisx.max ||
top < axisy.min || bottom > axisy.max)
return;
if (left < axisx.min) {
left = axisx.min;
drawLeft = false;
}
if (right > axisx.max) {
right = axisx.max;
drawRight = false;
}
if (bottom < axisy.min) {
bottom = axisy.min;
drawBottom = false;
}
if (top > axisy.max) {
top = axisy.max;
drawTop = false;
}
// fill the bar
if (fill) {
c.beginPath();
c.moveTo(axisx.p2c(left), axisy.p2c(bottom) + offset);
c.lineTo(axisx.p2c(left), axisy.p2c(top) + offset);
c.lineTo(axisx.p2c(right), axisy.p2c(top) + offset);
c.lineTo(axisx.p2c(right), axisy.p2c(bottom) + offset);
c.fill();
}
// draw outline
if (drawLeft || drawRight || drawTop || drawBottom) {
c.beginPath();
left = axisx.p2c(left);
bottom = axisy.p2c(bottom);
right = axisx.p2c(right);
top = axisy.p2c(top);
c.moveTo(left, bottom + offset);
if (drawLeft)
c.lineTo(left, top + offset);
else
c.moveTo(left, top + offset);
if (drawTop)
c.lineTo(right, top + offset);
else
c.moveTo(right, top + offset);
if (drawRight)
c.lineTo(right, bottom + offset);
else
c.moveTo(right, bottom + offset);
if (drawBottom)
c.lineTo(left, bottom + offset);
else
c.moveTo(left, bottom + offset);
c.stroke();
}
}
function drawSeriesBars(series) { function drawSeriesBars(series) {
function plotBars(data, deltaLeft, deltaRight, offset, fill, axisx, axisy) { function plotBars(data, barLeft, barRight, offset, fill, axisx, axisy) {
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
if (data[i] == null) if (data[i] == null)
continue; continue;
drawBar(data[i][0], data[i][1], barLeft, barRight, offset, fill, axisx, axisy, ctx);
var x = data[i][0], y = data[i][1],
drawLeft = true, drawRight = true,
drawTop = true, drawBottom = false,
left = x + deltaLeft, right = x + deltaRight,
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)
continue;
if (left < axisx.min) {
left = axisx.min;
drawLeft = false;
}
if (right > axisx.max) {
right = axisx.max;
drawRight = false;
}
if (bottom < axisy.min) {
bottom = axisy.min;
drawBottom = false;
}
if (top > axisy.max) {
top = axisy.max;
drawTop = false;
}
// fill the bar
if (fill) {
ctx.beginPath();
ctx.moveTo(axisx.p2c(left), axisy.p2c(bottom) + offset);
ctx.lineTo(axisx.p2c(left), axisy.p2c(top) + offset);
ctx.lineTo(axisx.p2c(right), axisy.p2c(top) + offset);
ctx.lineTo(axisx.p2c(right), axisy.p2c(bottom) + offset);
ctx.fill();
}
// draw outline
if (drawLeft || drawRight || drawTop || drawBottom) {
ctx.beginPath();
ctx.moveTo(axisx.p2c(left), axisy.p2c(bottom) + offset);
if (drawLeft)
ctx.lineTo(axisx.p2c(left), axisy.p2c(top) + offset);
else
ctx.moveTo(axisx.p2c(left), axisy.p2c(top) + offset);
if (drawTop)
ctx.lineTo(axisx.p2c(right), axisy.p2c(top) + offset);
else
ctx.moveTo(axisx.p2c(right), axisy.p2c(top) + offset);
if (drawRight)
ctx.lineTo(axisx.p2c(right), axisy.p2c(bottom) + offset);
else
ctx.moveTo(axisx.p2c(right), axisy.p2c(bottom) + offset);
if (drawBottom)
ctx.lineTo(axisx.p2c(left), axisy.p2c(bottom) + offset);
else
ctx.moveTo(axisx.p2c(left), axisy.p2c(bottom) + offset);
ctx.stroke();
}
} }
} }
...@@ -1397,24 +1403,24 @@ ...@@ -1397,24 +1403,24 @@
ctx.lineWidth = series.bars.lineWidth; ctx.lineWidth = series.bars.lineWidth;
ctx.strokeStyle = series.color; ctx.strokeStyle = series.color;
setFillStyle(series.bars, series.color); setFillStyle(series.bars, series.color);
var deltaLeft = series.bars.align == "left" ? 0 : -series.bars.barWidth/2; var barLeft = 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); plotBars(series.data, barLeft, barLeft + series.bars.barWidth, 0, series.bars.fill, series.xaxis, series.yaxis);
ctx.restore(); ctx.restore();
} }
function setFillStyle(obj, seriesColor) { function setFillStyle(obj, seriesColor) {
var fill = obj.fill; var fill = obj.fill;
if (fill) { if (!fill)
if (obj.fillColor) return;
ctx.fillStyle = obj.fillColor;
else {
var c = parseColor(seriesColor);
c.a = typeof fill == "number" ? fill : 0.4;
c.normalize();
ctx.fillStyle = c.toString();
}
}
if (obj.fillColor)
ctx.fillStyle = obj.fillColor;
else {
var c = parseColor(seriesColor);
c.a = typeof fill == "number" ? fill : 0.4;
c.normalize();
ctx.fillStyle = c.toString();
}
} }
function insertLegend() { function insertLegend() {
...@@ -1535,7 +1541,7 @@ ...@@ -1535,7 +1541,7 @@
// and no other point can be nearby // and no other point can be nearby
if (!foundPoint && mx >= x + barLeft && if (!foundPoint && mx >= x + barLeft &&
mx <= x + barRight && mx <= x + barRight &&
(y > 0 ? my >= 0 && my <= y : my <= 0 && my >= y)) my >= Math.min(0, y) && my <= Math.max(0, y))
item = result(i, j); item = result(i, j);
} }
...@@ -1681,8 +1687,11 @@ ...@@ -1681,8 +1687,11 @@
var i, h; var i, h;
for (i = 0; i < highlights.length; ++i) { for (i = 0; i < highlights.length; ++i) {
h = highlights[i]; h = highlights[i];
drawPointHighlight(h.series, h.point); if (h.series.bars.show)
drawBarHighlight(h.series, h.point);
else
drawPointHighlight(h.series, h.point);
} }
octx.restore(); octx.restore();
...@@ -1760,6 +1769,16 @@ ...@@ -1760,6 +1769,16 @@
octx.arc(axisx.p2c(x), axisy.p2c(y), radius, 0, 2 * Math.PI, true); octx.arc(axisx.p2c(x), axisy.p2c(y), radius, 0, 2 * Math.PI, true);
octx.stroke(); octx.stroke();
} }
function drawBarHighlight(series, point) {
octx.lineJoin = "round";
octx.lineWidth = series.bars.lineWidth;
octx.strokeStyle = parseColor(series.color).scale(1, 1, 1, 0.5).toString();
octx.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, true, series.xaxis, series.yaxis, octx);
}
function triggerSelectedEvent() { function triggerSelectedEvent() {
var x1 = Math.min(selection.first.x, selection.second.x), var x1 = Math.min(selection.first.x, selection.second.x),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment