source: appstream-generator/contrib/setup/js_tmp/Flot/examples/zooming/index.html @ 4841

Last change on this file since 4841 was 4841, checked in by Juanma, 2 years ago

Initial release

File size: 3.3 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5        <title>Flot Examples: Selection and zooming</title>
6        <link href="../examples.css" rel="stylesheet" type="text/css">
7        <!--[if lte IE 8]><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        <script type="text/javascript">
12
13        $(function() {
14
15                // setup plot
16
17                function getData(x1, x2) {
18
19                        var d = [];
20                        for (var i = 0; i <= 100; ++i) {
21                                var x = x1 + i * (x2 - x1) / 100;
22                                d.push([x, Math.sin(x * Math.sin(x))]);
23                        }
24
25                        return [
26                                { label: "sin(x sin(x))", data: d }
27                        ];
28                }
29
30                var options = {
31                        legend: {
32                                show: false
33                        },
34                        series: {
35                                lines: {
36                                        show: true
37                                },
38                                points: {
39                                        show: true
40                                }
41                        },
42                        yaxis: {
43                                ticks: 10
44                        },
45                        selection: {
46                                mode: "xy"
47                        }
48                };
49
50                var startData = getData(0, 3 * Math.PI);
51
52                var plot = $.plot("#placeholder", startData, options);
53
54                // Create the overview plot
55
56                var overview = $.plot("#overview", startData, {
57                        legend: {
58                                show: false
59                        },
60                        series: {
61                                lines: {
62                                        show: true,
63                                        lineWidth: 1
64                                },
65                                shadowSize: 0
66                        },
67                        xaxis: {
68                                ticks: 4
69                        },
70                        yaxis: {
71                                ticks: 3,
72                                min: -2,
73                                max: 2
74                        },
75                        grid: {
76                                color: "#999"
77                        },
78                        selection: {
79                                mode: "xy"
80                        }
81                });
82
83                // now connect the two
84
85                $("#placeholder").bind("plotselected", function (event, ranges) {
86
87                        // clamp the zooming to prevent eternal zoom
88
89                        if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {
90                                ranges.xaxis.to = ranges.xaxis.from + 0.00001;
91                        }
92
93                        if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) {
94                                ranges.yaxis.to = ranges.yaxis.from + 0.00001;
95                        }
96
97                        // do the zooming
98
99                        plot = $.plot("#placeholder", getData(ranges.xaxis.from, ranges.xaxis.to),
100                                $.extend(true, {}, options, {
101                                        xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
102                                        yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
103                                })
104                        );
105
106                        // don't fire event on the overview to prevent eternal loop
107
108                        overview.setSelection(ranges, true);
109                });
110
111                $("#overview").bind("plotselected", function (event, ranges) {
112                        plot.setSelection(ranges);
113                });
114
115                // Add the Flot version string to the footer
116
117                $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
118        });
119
120        </script>
121</head>
122<body>
123
124        <div id="header">
125                <h2>Selection and zooming</h2>
126        </div>
127
128        <div id="content">
129
130                <div class="demo-container">
131                        <div id="placeholder" class="demo-placeholder" style="float:left; width:650px;"></div>
132                        <div id="overview" class="demo-placeholder" style="float:right;width:160px; height:125px;"></div>
133                </div>
134
135                <p>Selection support makes it easy to construct flexible zooming schemes. 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>
136
137        </div>
138
139        <div id="footer">
140                Copyright &copy; 2007 - 2014 IOLA and Ole Laursen
141        </div>
142
143</body>
144</html>
Note: See TracBrowser for help on using the repository browser.