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

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

Initial release

File size: 3.9 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: Navigation</title>
6        <link href="../examples.css" rel="stylesheet" type="text/css">
7        <style type="text/css">
8
9        #placeholder .button {
10                position: absolute;
11                cursor: pointer;
12        }
13
14        #placeholder div.button {
15                font-size: smaller;
16                color: #999;
17                background-color: #eee;
18                padding: 2px;
19        }
20        .message {
21                padding-left: 50px;
22                font-size: smaller;
23        }
24
25        </style>
26        <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
27        <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
28        <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
29        <script language="javascript" type="text/javascript" src="../../jquery.flot.navigate.js"></script>
30        <script type="text/javascript">
31
32        $(function() {
33
34                // generate data set from a parametric function with a fractal look
35
36                function sumf(f, t, m) {
37                        var res = 0;
38                        for (var i = 1; i < m; ++i) {
39                                res += f(i * i * t) / (i * i);
40                        }
41                        return res;
42                }
43
44                var d1 = [];
45                for (var t = 0; t <= 2 * Math.PI; t += 0.01) {
46                        d1.push([sumf(Math.cos, t, 10), sumf(Math.sin, t, 10)]);
47                }
48
49                var data = [ d1 ],
50                        placeholder = $("#placeholder");
51
52                var plot = $.plot(placeholder, data, {
53                        series: {
54                                lines: {
55                                        show: true
56                                },
57                                shadowSize: 0
58                        },
59                        xaxis: {
60                                zoomRange: [0.1, 10],
61                                panRange: [-10, 10]
62                        },
63                        yaxis: {
64                                zoomRange: [0.1, 10],
65                                panRange: [-10, 10]
66                        },
67                        zoom: {
68                                interactive: true
69                        },
70                        pan: {
71                                interactive: true
72                        }
73                });
74
75                // show pan/zoom messages to illustrate events
76
77                placeholder.bind("plotpan", function (event, plot) {
78                        var axes = plot.getAxes();
79                        $(".message").html("Panning to x: "  + axes.xaxis.min.toFixed(2)
80                        + " &ndash; " + axes.xaxis.max.toFixed(2)
81                        + " and y: " + axes.yaxis.min.toFixed(2)
82                        + " &ndash; " + axes.yaxis.max.toFixed(2));
83                });
84
85                placeholder.bind("plotzoom", function (event, plot) {
86                        var axes = plot.getAxes();
87                        $(".message").html("Zooming to x: "  + axes.xaxis.min.toFixed(2)
88                        + " &ndash; " + axes.xaxis.max.toFixed(2)
89                        + " and y: " + axes.yaxis.min.toFixed(2)
90                        + " &ndash; " + axes.yaxis.max.toFixed(2));
91                });
92
93                // add zoom out button
94
95                $("<div class='button' style='right:20px;top:20px'>zoom out</div>")
96                        .appendTo(placeholder)
97                        .click(function (event) {
98                                event.preventDefault();
99                                plot.zoomOut();
100                        });
101
102                // and add panning buttons
103
104                // little helper for taking the repetitive work out of placing
105                // panning arrows
106
107                function addArrow(dir, right, top, offset) {
108                        $("<img class='button' src='arrow-" + dir + ".gif' style='right:" + right + "px;top:" + top + "px'>")
109                                .appendTo(placeholder)
110                                .click(function (e) {
111                                        e.preventDefault();
112                                        plot.pan(offset);
113                                });
114                }
115
116                addArrow("left", 55, 60, { left: -100 });
117                addArrow("right", 25, 60, { left: 100 });
118                addArrow("up", 40, 45, { top: -100 });
119                addArrow("down", 40, 75, { top: 100 });
120
121                // Add the Flot version string to the footer
122
123                $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
124        });
125
126        </script>
127</head>
128<body>
129
130        <div id="header">
131                <h2>Navigation</h2>
132        </div>
133
134        <div id="content">
135
136                <div class="demo-container">
137                        <div id="placeholder" class="demo-placeholder"></div>
138                </div>
139
140                <p class="message"></p>
141
142                <p>With the navigate plugin it is easy to add panning and zooming. Drag to pan, double click to zoom (or use the mouse scrollwheel).</p>
143
144                <p>The plugin fires events (useful for synchronizing several plots) and adds a couple of public methods so you can easily build a little user interface around it, like the little buttons at the top right in the plot.</p>
145
146        </div>
147
148        <div id="footer">
149                Copyright &copy; 2007 - 2014 IOLA and Ole Laursen
150        </div>
151
152</body>
153</html>
Note: See TracBrowser for help on using the repository browser.