root / hci / trunk / eneraptor-web-app / web-app / js / flot / examples / zooming.html @ 11
History | View | Annotate | Download (3.35 KB)
1 | 11 | alexbesir | <!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> |