diff options
| author | Frank Wuerthwein <fkw@ucsd.edu> | 2008-09-25 06:12:15 -0400 |
|---|---|---|
| committer | Frank Wuerthwein <fkw@ucsd.edu> | 2008-09-25 06:12:15 -0400 |
| commit | 7385ff9506ea6db4c07150ee1b56e436cf384918 (patch) | |
| tree | d455d480937ab6f9ee1b1fe48d4473d0971bf858 /examples/zooming.html | |
flot-0.5flot-0.5
Diffstat (limited to 'examples/zooming.html')
| -rw-r--r-- | examples/zooming.html | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/examples/zooming.html b/examples/zooming.html new file mode 100644 index 0000000..0f3284b --- /dev/null +++ b/examples/zooming.html @@ -0,0 +1,91 @@ +<!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.pack.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 style="float:left"> + <div id="placeholder" style="width:500px;height:300px"></div> + </div> + + <div id="miniature" style="float:left;margin-left:20px;margin-top:50px"> + <div id="overview" style="width:166px;height:100px"></div> + + <p id="overviewLegend" style="margin-left:10px"></p> + </div> + + <p style="clear:left"> The selection support makes + pretty advanced zooming schemes possible. With a few lines of code, + the small overview plot to the right has been connected to the large + plot. Try selecting a rectangle on either of them.</p> + +<script id="source" language="javascript" type="text/javascript"> +$(function () { + // setup plot + function getData(x1, x2) { + var d = []; + for (var i = x1; i < x2; i += (x2 - x1) / 100) + d.push([i, Math.sin(i * Math.sin(i))]); + + return [ + { label: "sin(x sin(x))", data: d } + ]; + } + + var options = { + legend: { show: false }, + lines: { show: true }, + points: { show: true }, + yaxis: { ticks: 10 }, + selection: { mode: "xy" } + }; + + var startData = getData(0, 3 * Math.PI); + + var plot = $.plot($("#placeholder"), startData, options); + + // setup overview + var overview = $.plot($("#overview"), startData, { + legend: { show: true, container: $("#overviewLegend") }, + lines: { show: true, lineWidth: 1 }, + shadowSize: 0, + xaxis: { ticks: 4 }, + yaxis: { ticks: 3, min: -2, max: 2 }, + grid: { color: "#999" }, + selection: { mode: "xy" } + }); + + // now connect the two + + $("#placeholder").bind("plotselected", function (event, ranges) { + // clamp the zooming to prevent eternal zoom + if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) + ranges.xaxis.to = ranges.xaxis.from + 0.00001; + if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) + ranges.yaxis.to = ranges.yaxis.from + 0.00001; + + // do the zooming + plot = $.plot($("#placeholder"), getData(ranges.xaxis.from, ranges.xaxis.to), + $.extend(true, {}, options, { + xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }, + yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to } + })); + + // don't fire event on the overview to prevent eternal loop + overview.setSelection(ranges, true); + }); + $("#overview").bind("plotselected", function (event, ranges) { + plot.setSelection(ranges); + }); +}); +</script> + + </body> +</html> |