Added navigate plugin for panning and zooming
git-svn-id: https://flot.googlecode.com/svn/trunk@186 1e0a6537-2640-0410-bfb7-f154510ff394pull/1/head
olau@iola.dk
17 years ago
parent
237861e9f8
commit
0c5bb75fcd
@ -0,0 +1,117 @@
|
||||
<!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>
|
||||
<script language="javascript" type="text/javascript" src="../jquery.flot.navigate.js"></script>
|
||||
<style>
|
||||
#placeholder .button {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
}
|
||||
#placeholder div.button {
|
||||
font-size: smaller;
|
||||
color: #999;
|
||||
background-color: #eee;
|
||||
padding: 2px;
|
||||
}
|
||||
.message {
|
||||
padding-left: 50px;
|
||||
font-size: smaller;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Flot Examples</h1>
|
||||
|
||||
<div id="placeholder" style="width:600px;height:300px;"></div>
|
||||
|
||||
<p class="message"></p>
|
||||
|
||||
<p>With the navigate plugin it is easy to add panning and
|
||||
zooming. Drag to pan, double click to zoom. The plugin fires
|
||||
events (useful for synchronizing several plots) and adds a
|
||||
couple of public methods so you can easily build
|
||||
a little user interface around it, like the little buttons
|
||||
at the top right in the plot.</p>
|
||||
|
||||
|
||||
<script id="source" language="javascript" type="text/javascript">
|
||||
$(function () {
|
||||
// generate data set from a parametric function with a fractal
|
||||
// look
|
||||
function sumf(f, t, m) {
|
||||
var res = 0;
|
||||
for (var i = 1; i < m; ++i)
|
||||
res += f(i * i * t) / (i * i);
|
||||
return res;
|
||||
}
|
||||
|
||||
var d1 = [];
|
||||
for (var t = 0; t <= 2 * Math.PI; t += 0.01)
|
||||
d1.push([sumf(Math.cos, t, 10), sumf(Math.sin, t, 10)]);
|
||||
var data = [ d1 ];
|
||||
|
||||
|
||||
var placeholder = $("#placeholder");
|
||||
var options = {
|
||||
series: { lines: { show: true }, shadowSize: 0 },
|
||||
xaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
|
||||
yaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
|
||||
zoom: {
|
||||
enable: true
|
||||
},
|
||||
pan: {
|
||||
enable: true
|
||||
}
|
||||
};
|
||||
|
||||
var plot = $.plot(placeholder, data, options);
|
||||
|
||||
// show pan/zoom messages to illustrate events
|
||||
placeholder.bind('plotpan', function (event, plot) {
|
||||
var axes = plot.getAxes();
|
||||
$(".message").html("Panning to x: " + axes.xaxis.min.toFixed(2)
|
||||
+ " – " + axes.xaxis.max.toFixed(2)
|
||||
+ " and y: " + axes.yaxis.min.toFixed(2)
|
||||
+ " – " + axes.yaxis.max.toFixed(2));
|
||||
});
|
||||
|
||||
placeholder.bind('plotzoom', function (event, plot) {
|
||||
var axes = plot.getAxes();
|
||||
$(".message").html("Zooming to x: " + axes.xaxis.min.toFixed(2)
|
||||
+ " – " + axes.xaxis.max.toFixed(2)
|
||||
+ " and y: " + axes.yaxis.min.toFixed(2)
|
||||
+ " – " + axes.yaxis.max.toFixed(2));
|
||||
});
|
||||
|
||||
// add zoom out button
|
||||
$('<div class="button" style="right:20px;top:20px">zoom out</div>').appendTo(placeholder).click(function (e) {
|
||||
e.preventDefault();
|
||||
plot.zoomOut();
|
||||
});
|
||||
|
||||
// and add panning buttons
|
||||
|
||||
// little helper for taking the repetitive work out of placing
|
||||
// panning arrows
|
||||
function addArrow(dir, right, top, offset) {
|
||||
$('<img class="button" src="arrow-' + dir + '.gif" style="right:' + right + 'px;top:' + top + 'px">').appendTo(placeholder).click(function (e) {
|
||||
e.preventDefault();
|
||||
plot.pan(offset);
|
||||
});
|
||||
}
|
||||
|
||||
addArrow('left', 55, 60, { left: -100 });
|
||||
addArrow('right', 25, 60, { left: 100 });
|
||||
addArrow('up', 40, 45, { top: -100 });
|
||||
addArrow('down', 40, 75, { top: 100 });
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,235 @@
|
||||
/*
|
||||
Flot plugin for adding panning and zooming capabilities to a plot.
|
||||
|
||||
The default behaviour is double click to zoom in, drag to pan. The
|
||||
plugin defines plot.zoom({ center }), plot.zoomOut() and
|
||||
plot.pan(offset) so you easily can add custom controls. It also fires
|
||||
a "plotpan" and "plotzoom" event when something happens, useful for
|
||||
synchronizing plots.
|
||||
|
||||
Example usage:
|
||||
|
||||
plot = $.plot(...);
|
||||
|
||||
// zoom default amount in on the pixel (100, 200)
|
||||
plot.zoom({ center: { left: 10, top: 20 } });
|
||||
|
||||
// zoom out again
|
||||
plot.zoomOut();
|
||||
|
||||
// pan 100 pixels to the left and 20 down
|
||||
plot.pan({ left: -100, top: 20 })
|
||||
|
||||
|
||||
Options:
|
||||
|
||||
zoom: {
|
||||
interactive: false
|
||||
trigger: "dblclick" // or "click" for single click
|
||||
amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
|
||||
}
|
||||
|
||||
pan: {
|
||||
interactive: false
|
||||
}
|
||||
|
||||
xaxis, yaxis, x2axis, y2axis: {
|
||||
zoomRange: null // or [number, number] (min range, max range)
|
||||
panRange: null // or [number, number] (min, max)
|
||||
}
|
||||
|
||||
"interactive" enables the built-in drag/click behaviour. "amount" is
|
||||
the amount to zoom the viewport relative to the current range, so 1 is
|
||||
100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is 70% (zoom out).
|
||||
|
||||
"zoomRange" is the interval in which zooming can happen, e.g. with
|
||||
zoomRange: [1, 100] the zoom will never scale the axis so that the
|
||||
difference between min and max is smaller than 1 or larger than 100.
|
||||
You can set either of them to null to ignore.
|
||||
|
||||
"panRange" confines the panning to stay within a range, e.g. with
|
||||
panRange: [-10, 20] panning stops at -10 in one end and at 20 in the
|
||||
other. Either can be null.
|
||||
*/
|
||||
|
||||
/*
|
||||
First an inline dependency:
|
||||
jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008, Three Dub Media (http://threedubmedia.com)
|
||||
Licensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-LICENSE.txt
|
||||
*/
|
||||
(function(E){E.fn.drag=function(L,K,J){if(K){this.bind("dragstart",L)}if(J){this.bind("dragend",J)}return !L?this.trigger("drag"):this.bind("drag",K?K:L)};var A=E.event,B=A.special,F=B.drag={not:":input",distance:0,which:1,dragging:false,setup:function(J){J=E.extend({distance:F.distance,which:F.which,not:F.not},J||{});J.distance=I(J.distance);A.add(this,"mousedown",H,J);if(this.attachEvent){this.attachEvent("ondragstart",D)}},teardown:function(){A.remove(this,"mousedown",H);if(this===F.dragging){F.dragging=F.proxy=false}G(this,true);if(this.detachEvent){this.detachEvent("ondragstart",D)}}};B.dragstart=B.dragend={setup:function(){},teardown:function(){}};function H(L){var K=this,J,M=L.data||{};if(M.elem){K=L.dragTarget=M.elem;L.dragProxy=F.proxy||K;L.cursorOffsetX=M.pageX-M.left;L.cursorOffsetY=M.pageY-M.top;L.offsetX=L.pageX-L.cursorOffsetX;L.offsetY=L.pageY-L.cursorOffsetY}else{if(F.dragging||(M.which>0&&L.which!=M.which)||E(L.target).is(M.not)){return }}switch(L.type){case"mousedown":E.extend(M,E(K).offset(),{elem:K,target:L.target,pageX:L.pageX,pageY:L.pageY});A.add(document,"mousemove mouseup",H,M);G(K,false);F.dragging=null;return false;case !F.dragging&&"mousemove":if(I(L.pageX-M.pageX)+I(L.pageY-M.pageY)<M.distance){break}L.target=M.target;J=C(L,"dragstart",K);if(J!==false){F.dragging=K;F.proxy=L.dragProxy=E(J||K)[0]}case"mousemove":if(F.dragging){J=C(L,"drag",K);if(B.drop){B.drop.allowed=(J!==false);B.drop.handler(L)}if(J!==false){break}L.type="mouseup"}case"mouseup":A.remove(document,"mousemove mouseup",H);if(F.dragging){if(B.drop){B.drop.handler(L)}C(L,"dragend",K)}G(K,true);F.dragging=F.proxy=M.elem=false;break}return true}function C(M,K,L){M.type=K;var J=E.event.handle.call(L,M);return J===false?false:J||M.result}function I(J){return Math.pow(J,2)}function D(){return(F.dragging===false)}function G(K,J){if(!K){return }K.unselectable=J?"off":"on";K.onselectstart=function(){return J};if(K.style){K.style.MozUserSelect=J?"":"none"}}})(jQuery);
|
||||
|
||||
|
||||
(function ($) {
|
||||
var options = {
|
||||
xaxis: {
|
||||
zoomRange: null, // or [number, number] (min range, max range)
|
||||
panRange: null // or [number, number] (min, max)
|
||||
},
|
||||
zoom: {
|
||||
interactive: false,
|
||||
trigger: "dblclick", // or "click" for single click
|
||||
amount: 1.5 // how much to zoom relative to current position, 2 = 200% (zoom in), 0.5 = 50% (zoom out)
|
||||
},
|
||||
pan: {
|
||||
interactive: false
|
||||
}
|
||||
};
|
||||
|
||||
function init(plot) {
|
||||
var prevPoint = null;
|
||||
|
||||
function bindEvents(plot, eventHolder) {
|
||||
var o = plot.getOptions();
|
||||
if (o.zoom.interactive)
|
||||
eventHolder[o.zoom.trigger](function (e) {
|
||||
prevPoint = plot.offset();
|
||||
prevPoint.left = e.pageX - prevPoint.left;
|
||||
prevPoint.top = e.pageY - prevPoint.top;
|
||||
plot.zoom({ center: prevPoint });
|
||||
});
|
||||
|
||||
if (o.pan.interactive) {
|
||||
var prevCursor = 'default', pageX = 0, pageY = 0;
|
||||
|
||||
eventHolder.bind("dragstart", { distance: 10 }, function (e) {
|
||||
if (e.which != 1) // only accept left-click
|
||||
return false;
|
||||
eventHolderCursor = eventHolder.css('cursor');
|
||||
eventHolder.css('cursor', 'move');
|
||||
pageX = e.pageX;
|
||||
pageY = e.pageY;
|
||||
});
|
||||
eventHolder.bind("drag", function (e) {
|
||||
// unused at the moment, but we need it here to
|
||||
// trigger the dragstart/dragend events
|
||||
});
|
||||
eventHolder.bind("dragend", function (e) {
|
||||
eventHolder.css('cursor', prevCursor);
|
||||
plot.pan({ left: pageX - e.pageX,
|
||||
top: pageY - e.pageY });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
plot.zoomOut = function () {
|
||||
plot.zoom({ amount: 1 / plot.getOptions().zoom.amount });
|
||||
prevPoint = null;
|
||||
}
|
||||
|
||||
plot.zoom = function (args) {
|
||||
var axes = plot.getAxes(),
|
||||
options = plot.getOptions(),
|
||||
c = args.center ? args.center : prevPoint,
|
||||
amount = args.amount ? args.amount : options.zoom.amount,
|
||||
w = plot.width(), h = plot.height();
|
||||
|
||||
if (!c)
|
||||
c = { left: w / 2, top: h / 2 };
|
||||
|
||||
var xf = c.left / w,
|
||||
x1 = c.left - xf * w / amount,
|
||||
x2 = c.left + (1 - xf) * w / amount,
|
||||
yf = c.top / h,
|
||||
y1 = c.top - yf * h / amount,
|
||||
y2 = c.top + (1 - yf) * h / amount;
|
||||
|
||||
function scaleAxis(min, max, name) {
|
||||
var axis = axes[name],
|
||||
axisOptions = options[name];
|
||||
|
||||
if (!axis.used)
|
||||
return;
|
||||
|
||||
min = axis.c2p(min);
|
||||
max = axis.c2p(max);
|
||||
if (max < min) { // make sure min < max
|
||||
var tmp = min
|
||||
min = max;
|
||||
max = tmp;
|
||||
}
|
||||
|
||||
var range = max - min, zr = axisOptions.zoomRange;
|
||||
if (zr &&
|
||||
((zr[0] != null && range < zr[0]) ||
|
||||
(zr[1] != null && range > zr[1])))
|
||||
return;
|
||||
|
||||
axisOptions.min = min;
|
||||
axisOptions.max = max;
|
||||
}
|
||||
|
||||
scaleAxis(x1, x2, 'xaxis');
|
||||
scaleAxis(x1, x2, 'x2axis');
|
||||
scaleAxis(y1, y2, 'yaxis');
|
||||
scaleAxis(y1, y2, 'y2axis');
|
||||
|
||||
plot.setupGrid();
|
||||
plot.draw();
|
||||
|
||||
if (!args.preventEvent)
|
||||
plot.getPlaceholder().trigger("plotzoom", [ plot ]);
|
||||
}
|
||||
|
||||
plot.pan = function (args) {
|
||||
var l = +args.left, t = +args.top,
|
||||
axes = plot.getAxes(), options = plot.getOptions();
|
||||
|
||||
if (isNaN(l))
|
||||
l = 0;
|
||||
if (isNaN(t))
|
||||
t = 0;
|
||||
|
||||
function panAxis(delta, name) {
|
||||
var axis = axes[name],
|
||||
axisOptions = options[name],
|
||||
min, max;
|
||||
|
||||
if (!axis.used)
|
||||
return;
|
||||
|
||||
min = axis.c2p(axis.p2c(axis.min) + delta),
|
||||
max = axis.c2p(axis.p2c(axis.max) + delta);
|
||||
|
||||
var pr = axisOptions.panRange;
|
||||
if (pr) {
|
||||
// check whether we hit the wall
|
||||
if (pr[0] != null && pr[0] > min) {
|
||||
delta = pr[0] - min;
|
||||
min += delta;
|
||||
max += delta;
|
||||
}
|
||||
|
||||
if (pr[1] != null && pr[1] < max) {
|
||||
delta = pr[1] - max;
|
||||
min += delta;
|
||||
max += delta;
|
||||
}
|
||||
}
|
||||
|
||||
axisOptions.min = min;
|
||||
axisOptions.max = max;
|
||||
}
|
||||
|
||||
panAxis(l, 'xaxis');
|
||||
panAxis(l, 'x2axis');
|
||||
panAxis(t, 'yaxis');
|
||||
panAxis(t, 'y2axis');
|
||||
|
||||
plot.setupGrid();
|
||||
plot.draw();
|
||||
|
||||
if (!args.preventEvent)
|
||||
plot.getPlaceholder().trigger("plotpan", [ plot ]);
|
||||
}
|
||||
|
||||
plot.hooks.bindEvents.push(bindEvents);
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: options,
|
||||
name: 'navigate',
|
||||
version: '1.0'
|
||||
});
|
||||
})(jQuery);
|
||||
Loading…
Reference in New Issue