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

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

Initial release

File size: 2.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: Resizing</title>
6        <link href="../examples.css" rel="stylesheet" type="text/css">
7        <link href="../shared/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
8        <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
9        <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
10        <script language="javascript" type="text/javascript" src="../shared/jquery-ui/jquery-ui.min.js"></script>
11        <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
12        <script language="javascript" type="text/javascript" src="../../jquery.flot.resize.js"></script>
13        <script type="text/javascript">
14
15        $(function() {
16
17                var d1 = [];
18                for (var i = 0; i < 14; i += 0.5) {
19                        d1.push([i, Math.sin(i)]);
20                }
21
22                var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
23                var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
24
25                var placeholder = $("#placeholder");
26                var plot = $.plot(placeholder, [d1, d2, d3]);
27
28                // The plugin includes a jQuery plugin for adding resize events to any
29                // element.  Add a callback so we can display the placeholder size.
30
31                placeholder.resize(function () {
32                        $(".message").text("Placeholder is now "
33                                + $(this).width() + "x" + $(this).height()
34                                + " pixels");
35                });
36
37                $(".demo-container").resizable({
38                        maxWidth: 900,
39                        maxHeight: 500,
40                        minWidth: 450,
41                        minHeight: 250
42                });
43
44                // Add the Flot version string to the footer
45
46                $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
47        });
48
49        </script>
50</head>
51<body>
52
53        <div id="header">
54                <h2>Resizing</h2>
55        </div>
56
57        <div id="content">
58
59                <div class="demo-container">
60                        <div id="placeholder" class="demo-placeholder"></div>
61                </div>
62
63                <p class="message"></p>
64
65                <p>Sometimes it makes more sense to just let the plot take up the available space. In that case, we need to redraw the plot each time the placeholder changes its size. If you include the resize plugin, this is handled automatically.</p>
66
67                <p>Drag the bottom and right sides of the plot to resize it.</p>
68
69        </div>
70
71        <div id="footer">
72                Copyright &copy; 2007 - 2014 IOLA and Ole Laursen
73        </div>
74
75</body>
76</html>
Note: See TracBrowser for help on using the repository browser.