summaryrefslogtreecommitdiff
path: root/examples/zooming.html
diff options
context:
space:
mode:
Diffstat (limited to 'examples/zooming.html')
-rw-r--r--examples/zooming.html91
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>