root / hci / trunk / eneraptor-web-app / web-app / js / flot / examples / selection.html @ 11
History | View | Annotate | Download (4.96 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 id="placeholder" style="width:600px;height:300px"></div> |
||
16 | |||
17 | <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> |
||
18 | |||
19 | <p>Flot supports selections through the selection plugin.
|
||
20 | You can enable rectangular selection |
||
21 | or one-dimensional selection if the user should only be able to |
||
22 | select on one axis. Try left-click and drag on the plot above |
||
23 | where selection on the x axis is enabled.</p>
|
||
24 | |||
25 | <p>You selected: <span id="selection"></span></p> |
||
26 | |||
27 | <p>The plot command returns a plot object you can use to control
|
||
28 | the selection. Click the buttons below.</p>
|
||
29 | |||
30 | <p><input id="clearSelection" type="button" value="Clear selection" /> |
||
31 | <input id="setSelection" type="button" value="Select year 1994" /></p> |
||
32 | |||
33 | <p>Selections are really useful for zooming. Just replot the
|
||
34 | chart with min and max values for the axes set to the values |
||
35 | in the "plotselected" event triggered. Enable the checkbox |
||
36 | below and select a region again.</p>
|
||
37 | |||
38 | <p><input id="zoom" type="checkbox">Zoom to selection.</input></p> |
||
39 | |||
40 | <script id="source" language="javascript" type="text/javascript"> |
||
41 | $(function () {
|
||
42 | var data = [
|
||
43 | {
|
||
44 | label: "United States",
|
||
45 | 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]]
|
||
46 | },
|
||
47 | {
|
||
48 | label: "Russia",
|
||
49 | 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]]
|
||
50 | },
|
||
51 | {
|
||
52 | label: "United Kingdom",
|
||
53 | 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]]
|
||
54 | },
|
||
55 | {
|
||
56 | label: "Germany",
|
||
57 | 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]]
|
||
58 | },
|
||
59 | {
|
||
60 | label: "Denmark",
|
||
61 | 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]]
|
||
62 | },
|
||
63 | {
|
||
64 | label: "Sweden",
|
||
65 | 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]]
|
||
66 | },
|
||
67 | {
|
||
68 | label: "Norway",
|
||
69 | 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]]
|
||
70 | }
|
||
71 | ];
|
||
72 | |||
73 | var options = {
|
||
74 | series: {
|
||
75 | lines: { show: true },
|
||
76 | points: { show: true }
|
||
77 | },
|
||
78 | legend: { noColumns: 2 },
|
||
79 | xaxis: { tickDecimals: 0 },
|
||
80 | yaxis: { min: 0 },
|
||
81 | selection: { mode: "x" }
|
||
82 | };
|
||
83 | |||
84 | var placeholder = $("#placeholder");
|
||
85 | |||
86 | placeholder.bind("plotselected", function (event, ranges) {
|
||
87 | $("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));
|
||
88 | |||
89 | var zoom = $("#zoom").attr("checked");
|
||
90 | if (zoom)
|
||
91 | plot = $.plot(placeholder, data,
|
||
92 | $.extend(true, {}, options, {
|
||
93 | xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
|
||
94 | }));
|
||
95 | });
|
||
96 | |||
97 | placeholder.bind("plotunselected", function (event) {
|
||
98 | $("#selection").text("");
|
||
99 | });
|
||
100 | |||
101 | var plot = $.plot(placeholder, data, options);
|
||
102 | |||
103 | $("#clearSelection").click(function () {
|
||
104 | plot.clearSelection();
|
||
105 | });
|
||
106 | |||
107 | $("#setSelection").click(function () {
|
||
108 | plot.setSelection({ x1: 1994, x2: 1995 });
|
||
109 | });
|
||
110 | });
|
||
111 | </script>
|
||
112 | |||
113 | </body>
|
||
114 | </html> |