root / hci / trunk / eneraptor-web-app / web-app / js / flot / examples / zooming.html @ 11
History | View | Annotate | Download (3.35 KB)
| 1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|---|---|
| 2 |
<html>
|
| 3 |
<head>
|
| 4 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| 5 |
<title>Flot Examples</title> |
| 6 |
<link href="layout.css" rel="stylesheet" type="text/css"></link> |
| 7 |
<!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
|
| 8 |
<script language="javascript" type="text/javascript" src="../jquery.js"></script> |
| 9 |
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> |
| 10 |
<script language="javascript" type="text/javascript" src="../jquery.flot.selection.js"></script> |
| 11 |
</head>
|
| 12 |
<body>
|
| 13 |
<h1>Flot Examples</h1> |
| 14 |
|
| 15 |
<div style="float:left"> |
| 16 |
<div id="placeholder" style="width:500px;height:300px"></div> |
| 17 |
</div>
|
| 18 |
|
| 19 |
<div id="miniature" style="float:left;margin-left:20px;margin-top:50px"> |
| 20 |
<div id="overview" style="width:166px;height:100px"></div> |
| 21 |
|
| 22 |
<p id="overviewLegend" style="margin-left:10px"></p> |
| 23 |
</div>
|
| 24 |
|
| 25 |
<p style="clear:left"> The selection support makes |
| 26 |
pretty advanced zooming schemes possible. With a few lines of code, |
| 27 |
the small overview plot to the right has been connected to the large |
| 28 |
plot. Try selecting a rectangle on either of them.</p>
|
| 29 |
|
| 30 |
<script id="source"> |
| 31 |
$(function () {
|
| 32 |
// setup plot
|
| 33 |
function getData(x1, x2) {
|
| 34 |
var d = [];
|
| 35 |
for (var i = 0; i <= 100; ++i) {
|
| 36 |
var x = x1 + i * (x2 - x1) / 100;
|
| 37 |
d.push([x, Math.sin(x * Math.sin(x))]);
|
| 38 |
}
|
| 39 |
|
| 40 |
return [
|
| 41 |
{ label: "sin(x sin(x))", data: d }
|
| 42 |
];
|
| 43 |
}
|
| 44 |
|
| 45 |
var options = {
|
| 46 |
legend: { show: false },
|
| 47 |
series: {
|
| 48 |
lines: { show: true },
|
| 49 |
points: { show: true }
|
| 50 |
},
|
| 51 |
yaxis: { ticks: 10 },
|
| 52 |
selection: { mode: "xy" }
|
| 53 |
};
|
| 54 |
|
| 55 |
var startData = getData(0, 3 * Math.PI);
|
| 56 |
|
| 57 |
var plot = $.plot($("#placeholder"), startData, options);
|
| 58 |
|
| 59 |
// setup overview
|
| 60 |
var overview = $.plot($("#overview"), startData, {
|
| 61 |
legend: { show: true, container: $("#overviewLegend") },
|
| 62 |
series: {
|
| 63 |
lines: { show: true, lineWidth: 1 },
|
| 64 |
shadowSize: 0
|
| 65 |
},
|
| 66 |
xaxis: { ticks: 4 },
|
| 67 |
yaxis: { ticks: 3, min: -2, max: 2 },
|
| 68 |
grid: { color: "#999" },
|
| 69 |
selection: { mode: "xy" }
|
| 70 |
});
|
| 71 |
|
| 72 |
// now connect the two
|
| 73 |
|
| 74 |
$("#placeholder").bind("plotselected", function (event, ranges) {
|
| 75 |
// clamp the zooming to prevent eternal zoom
|
| 76 |
if (ranges.xaxis.to - ranges.xaxis.from < 0.00001)
|
| 77 |
ranges.xaxis.to = ranges.xaxis.from + 0.00001;
|
| 78 |
if (ranges.yaxis.to - ranges.yaxis.from < 0.00001)
|
| 79 |
ranges.yaxis.to = ranges.yaxis.from + 0.00001;
|
| 80 |
|
| 81 |
// do the zooming
|
| 82 |
plot = $.plot($("#placeholder"), getData(ranges.xaxis.from, ranges.xaxis.to),
|
| 83 |
$.extend(true, {}, options, {
|
| 84 |
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
|
| 85 |
yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
|
| 86 |
}));
|
| 87 |
|
| 88 |
// don't fire event on the overview to prevent eternal loop
|
| 89 |
overview.setSelection(ranges, true);
|
| 90 |
});
|
| 91 |
$("#overview").bind("plotselected", function (event, ranges) {
|
| 92 |
plot.setSelection(ranges);
|
| 93 |
});
|
| 94 |
});
|
| 95 |
</script>
|
| 96 |
|
| 97 |
</body>
|
| 98 |
</html>
|