From e8d764d0bab1a09f1022879064334c4a025b6bd0 Mon Sep 17 00:00:00 2001 From: "olau@iola.dk" Date: Tue, 23 Jun 2009 17:04:15 +0000 Subject: [PATCH] Added "pointOffset" for converting a point in data space to an offset within the placeholder git-svn-id: https://flot.googlecode.com/svn/trunk@168 1e0a6537-2640-0410-bfb7-f154510ff394 --- API.txt | 25 ++++++++++---- NEWS.txt | 5 ++- examples/annotating.html | 75 ++++++++++++++++++++++++++++++++++++++++ jquery.flot.js | 45 +++++++++--------------- 4 files changed, 115 insertions(+), 35 deletions(-) create mode 100644 examples/annotating.html diff --git a/API.txt b/API.txt index 1abd9ef..4ca03da 100644 --- a/API.txt +++ b/API.txt @@ -556,7 +556,7 @@ A line is drawn if from and to are the same, e.g. markings: [ { yaxis: { from: 1, to: 1 } }, ... ] would draw a line parallel to the x axis at y = 1. You can control the -line width with "lineWidth" in the ranges objects. +line width with "lineWidth" in the range object. An example function might look like this: @@ -790,10 +790,19 @@ can call: to the document, useful for instance for calculating mouse positions (event.pageX/Y minus this offset is the pixel position inside the plot). - + + - pointOffset({ x: xpos, y: ypos }) + + Returns the calculated offset of the data point at (x, y) in data + space within the placeholder div. If you are working with dual axes, you + can specify the x and y axis references, e.g. + + o = pointOffset({ x: xpos, y: ypos, xaxis: 2, yaxis: 2 }) + // o.left and o.top now contains the offset within the div + There are also some members that let you peek inside the internal -workings of Flot which in some cases is useful. Note that if you change +workings of Flot which is useful in some cases. Note that if you change something in the objects returned, you're changing the objects used by Flot to keep track of its state, so be careful. @@ -818,9 +827,13 @@ Flot to keep track of its state, so be careful. - getAxes() Gets an object with the axes settings as { xaxis, yaxis, x2axis, - y2axis }. Various things are stuffed inside an axis object, e.g. - you could use getAxes().xaxis.ticks to find out what the ticks are - for the xaxis. + y2axis }. + + Various things are stuffed inside an axis object, e.g. you could + use getAxes().xaxis.ticks to find out what the ticks are for the + xaxis. Two other useful attributes are p2c and c2p, functions for + transforming from data point space to the canvas plot space and + back. Both returns values that are offset with the plot offset. - getCanvas() diff --git a/NEWS.txt b/NEWS.txt index 5e605a3..46524c3 100644 --- a/NEWS.txt +++ b/NEWS.txt @@ -76,6 +76,9 @@ Changes: bars. - New option to disable the (grid.show). + +- Added pointOffset method for converting a point in data space to an + offset within the placeholder. - Plugin system: register an init method in the $.flot.plugins array to get started, see PLUGINS.txt for details on how to write plugins. @@ -83,7 +86,7 @@ Changes: - Hooks: you can register functions that are called while Flot is crunching the data and doing the plot. This can be used to modify Flot without changing the source, useful for writing plugins. At - this point only a few hooks are defined. + this point only some hooks are defined. - Threshold plugin: you can set a threshold and a color, and the data points below that threshold will then get the color. Useful for diff --git a/examples/annotating.html b/examples/annotating.html new file mode 100644 index 0000000..9d99ea4 --- /dev/null +++ b/examples/annotating.html @@ -0,0 +1,75 @@ + + + + + Flot Examples + + + + + + +

Flot Examples

+ +
+ +

Flot has support for simple background decorations such as + lines and rectangles. They can be useful for marking up certain + areas. You can easily add any HTML you need with standard DOM + manipulation, e.g. for labels. For drawing custom shapes there is + also direct access to the canvas.

+ + + + + diff --git a/jquery.flot.js b/jquery.flot.js index af13fab..6b10024 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -144,6 +144,11 @@ plot.highlight = highlight; plot.unhighlight = unhighlight; plot.triggerRedrawOverlay = triggerRedrawOverlay; + plot.pointOffset = function(point) { + return { left: parseInt(axisSpecToRealAxis(point, "xaxis").p2c(+point.x) + plotOffset.left), + top: parseInt(axisSpecToRealAxis(point, "yaxis").p2c(+point.y) + plotOffset.top) }; + } + // public attributes plot.hooks = hooks; @@ -225,6 +230,15 @@ return res; } + function axisSpecToRealAxis(obj, attr) { + var a = obj[attr]; + if (!a || a == 1) + return axes[attr]; + if (typeof a == "number") + return axes[attr.charAt(0) + a + attr.slice(1)]; + return a; // assume it's OK + } + function fillInSeriesOptions() { var i; @@ -293,21 +307,8 @@ s.lines.show = true; // setup axes - if (!s.xaxis) - s.xaxis = axes.xaxis; - - if (s.xaxis == 1) - s.xaxis = axes.xaxis; - else if (s.xaxis == 2) - s.xaxis = axes.x2axis; - - if (!s.yaxis) - s.yaxis = axes.yaxis; - - if (s.yaxis == 1) - s.yaxis = axes.yaxis; - else if (s.yaxis == 2) - s.yaxis = axes.y2axis; + s.xaxis = axisSpecToRealAxis(s, "xaxis"); + s.yaxis = axisSpecToRealAxis(s, "yaxis"); } } @@ -1162,7 +1163,7 @@ ctx.restore(); } - + function insertLabels() { target.find(".tickLabels").remove(); @@ -1858,18 +1859,6 @@ function (s) { return s["clickable"] != false; }); } - /* - function userPositionInCanvasSpace(pos) { - return { x: parseInt(pos.x != null ? axes.xaxis.p2c(pos.x) : axes.x2axis.p2c(pos.x2)), - y: parseInt(pos.y != null ? axes.yaxis.p2c(pos.y) : axes.y2axis.p2c(pos.y2)) }; - } - - function positionInDivSpace(pos) { - var cpos = userPositionInCanvasSpace(pos); - return { x: cpos.x + plotOffset.left, - y: cpos.y + plotOffset.top }; - }*/ - // trigger click or hover event (they send the same parameters // so we share their code) function triggerClickHoverEvent(eventname, event, seriesFilter) {