Skip to content

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

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
parent 2ebeb5d4
Hide whitespace changes
Inline Side-by-side
Showing with 115 additions and 35 deletions
API.txt
View file @ e8d764d0
......@@ -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()
......
NEWS.txt
View file @ e8d764d0
......@@ -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
......
examples/annotating.html 0 → 100644
View file @ e8d764d0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p>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.</p>
<script id="source" language="javascript" type="text/javascript">
$(function () {
// generate a dataset
var d1 = [];
for (var i = 0; i < 20; ++i)
d1.push([i, Math.sin(i)]);
var data = [{ data: d1, label: "Pressure", color: "#333" }];
// setup background areas
var markings = [
{ color: '#f6f6f6', yaxis: { from: 1 } },
{ color: '#f6f6f6', yaxis: { to: -1 } },
{ color: '#000', lineWidth: 1, xaxis: { from: 2, to: 2 } },
{ color: '#000', lineWidth: 1, xaxis: { from: 8, to: 8 } }
];
var placeholder = $("#placeholder");
// plot it
var plot = $.plot(placeholder, data, {
bars: { show: true, barWidth: 0.5, fill: 0.9 },
xaxis: { ticks: [], autoscaleMargin: 0.02 },
yaxis: { min: -2, max: 2 },
grid: { markings: markings }
});
// add labels
var o;
o = plot.pointOffset({ x: 2, y: -1.2});
// we just append it to the placeholder which Flot already uses
// for positioning
placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Warming up</div>');
o = plot.pointOffset({ x: 8, y: -1.2});
placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Actual measurements</div>');
// draw a little arrow on top of the last label to demonstrate
// canvas drawing
var ctx = plot.getCanvas().getContext("2d");
ctx.beginPath();
o.left += 4;
ctx.moveTo(o.left, o.top);
ctx.lineTo(o.left, o.top - 10);
ctx.lineTo(o.left + 10, o.top - 5);
ctx.lineTo(o.left, o.top);
ctx.fillStyle = "#000";
ctx.fill();
});
</script>
</body>
</html>
jquery.flot.js
View file @ e8d764d0
......@@ -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) {
......
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