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

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

Initial release

File size: 5.2 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</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                // Shim allowing us to get the state of the check-box on jQuery versions
16                // prior to 1.6, when prop was added.  The reason we don't just use attr
17                // is because it doesn't work in jQuery versions 1.9.x and later.
18
19                // TODO: Remove this once Flot's minimum supported jQuery reaches 1.6.
20                if (typeof $.fn.prop != 'function') {
21                    $.fn.prop = $.fn.attr;
22                }
23
24                var data = [{
25                        label: "United States",
26                        data: [[1990, 18.9], [1991, 18.7], [1992, 18.4], [1993, 19.3], [1994, 19.5], [1995, 19.3], [1996, 19.4], [1997, 20.2], [1998, 19.8], [1999, 19.9], [2000, 20.4], [2001, 20.1], [2002, 20.0], [2003, 19.8], [2004, 20.4]]
27                }, {
28                        label: "Russia", 
29                        data: [[1992, 13.4], [1993, 12.2], [1994, 10.6], [1995, 10.2], [1996, 10.1], [1997, 9.7], [1998, 9.5], [1999, 9.7], [2000, 9.9], [2001, 9.9], [2002, 9.9], [2003, 10.3], [2004, 10.5]]
30                }, {
31                        label: "United Kingdom",
32                        data: [[1990, 10.0], [1991, 11.3], [1992, 9.9], [1993, 9.6], [1994, 9.5], [1995, 9.5], [1996, 9.9], [1997, 9.3], [1998, 9.2], [1999, 9.2], [2000, 9.5], [2001, 9.6], [2002, 9.3], [2003, 9.4], [2004, 9.79]]
33                }, {
34                        label: "Germany",
35                        data: [[1990, 12.4], [1991, 11.2], [1992, 10.8], [1993, 10.5], [1994, 10.4], [1995, 10.2], [1996, 10.5], [1997, 10.2], [1998, 10.1], [1999, 9.6], [2000, 9.7], [2001, 10.0], [2002, 9.7], [2003, 9.8], [2004, 9.79]]
36                }, {
37                        label: "Denmark",
38                        data: [[1990, 9.7], [1991, 12.1], [1992, 10.3], [1993, 11.3], [1994, 11.7], [1995, 10.6], [1996, 12.8], [1997, 10.8], [1998, 10.3], [1999, 9.4], [2000, 8.7], [2001, 9.0], [2002, 8.9], [2003, 10.1], [2004, 9.80]]
39                }, {
40                        label: "Sweden",
41                        data: [[1990, 5.8], [1991, 6.0], [1992, 5.9], [1993, 5.5], [1994, 5.7], [1995, 5.3], [1996, 6.1], [1997, 5.4], [1998, 5.4], [1999, 5.1], [2000, 5.2], [2001, 5.4], [2002, 6.2], [2003, 5.9], [2004, 5.89]]
42                }, {
43                        label: "Norway",
44                        data: [[1990, 8.3], [1991, 8.3], [1992, 7.8], [1993, 8.3], [1994, 8.4], [1995, 5.9], [1996, 6.4], [1997, 6.7], [1998, 6.9], [1999, 7.6], [2000, 7.4], [2001, 8.1], [2002, 12.5], [2003, 9.9], [2004, 19.0]]
45                }];
46
47                var options = {
48                        series: {
49                                lines: {
50                                        show: true
51                                },
52                                points: {
53                                        show: true
54                                }
55                        },
56                        legend: {
57                                noColumns: 2
58                        },
59                        xaxis: {
60                                tickDecimals: 0
61                        },
62                        yaxis: {
63                                min: 0
64                        },
65                        selection: {
66                                mode: "x"
67                        }
68                };
69
70                var placeholder = $("#placeholder");
71
72                placeholder.bind("plotselected", function (event, ranges) {
73
74                        $("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));
75
76                        var zoom = $("#zoom").prop("checked");
77
78                        if (zoom) {
79                                $.each(plot.getXAxes(), function(_, axis) {
80                                        var opts = axis.options;
81                                        opts.min = ranges.xaxis.from;
82                                        opts.max = ranges.xaxis.to;
83                                });
84                                plot.setupGrid();
85                                plot.draw();
86                                plot.clearSelection();
87                        }
88                });
89
90                placeholder.bind("plotunselected", function (event) {
91                        $("#selection").text("");
92                });
93
94                var plot = $.plot(placeholder, data, options);
95
96                $("#clearSelection").click(function () {
97                        plot.clearSelection();
98                });
99
100                $("#setSelection").click(function () {
101                        plot.setSelection({
102                                xaxis: {
103                                        from: 1994,
104                                        to: 1995
105                                }
106                        });
107                });
108
109                // Add the Flot version string to the footer
110
111                $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
112        });
113
114        </script>
115</head>
116<body>
117
118        <div id="header">
119                <h2>Selection</h2>
120        </div>
121
122        <div id="content">
123
124                <div class="demo-container">
125                        <div id="placeholder" class="demo-placeholder"></div>
126                </div>
127
128                <p>1000 kg. CO<sub>2</sub> emissions per year per capita for various countries (source: <a href="http://en.wikipedia.org/wiki/List_of_countries_by_carbon_dioxide_emissions_per_capita">Wikipedia</a>).</p>
129
130                <p>Flot supports selections through the selection plugin. You can enable rectangular selection or one-dimensional selection if the user should only be able to select on one axis. Try left-click and drag on the plot above where selection on the x axis is enabled.</p>
131
132                <p>You selected: <span id="selection"></span></p>
133
134                <p>The plot command returns a plot object you can use to control the selection. Click the buttons below.</p>
135
136                <p>
137                        <button id="clearSelection">Clear selection</button>
138                        <button id="setSelection">Select year 1994</button>
139                </p>
140
141                <p>Selections are really useful for zooming. Just replot the chart with min and max values for the axes set to the values in the "plotselected" event triggered. Enable the checkbox below and select a region again.</p>
142
143                <p><label><input id="zoom" type="checkbox"></input>Zoom to selection.</label></p>
144
145        </div>
146
147        <div id="footer">
148                Copyright &copy; 2007 - 2014 IOLA and Ole Laursen
149        </div>
150
151</body>
152</html>
Note: See TracBrowser for help on using the repository browser.