index.html (5063B)
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 var data = [{ 16 label: "United States", 17 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]] 18 }, { 19 label: "Russia", 20 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]] 21 }, { 22 label: "United Kingdom", 23 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]] 24 }, { 25 label: "Germany", 26 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]] 27 }, { 28 label: "Denmark", 29 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]] 30 }, { 31 label: "Sweden", 32 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]] 33 }, { 34 label: "Norway", 35 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]] 36 }]; 37 38 var options = { 39 series: { 40 lines: { 41 show: true 42 }, 43 points: { 44 show: true 45 } 46 }, 47 legend: { 48 noColumns: 2 49 }, 50 xaxis: { 51 tickDecimals: 0 52 }, 53 yaxis: { 54 min: 0 55 }, 56 selection: { 57 mode: "x" 58 } 59 }; 60 61 var placeholder = $("#placeholder"); 62 63 placeholder.bind("plotselected", function (event, ranges) { 64 65 $("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1)); 66 67 var zoom = $("#zoom").attr("checked"); 68 69 if (zoom) { 70 plot = $.plot(placeholder, data, $.extend(true, {}, options, { 71 xaxis: { 72 min: ranges.xaxis.from, 73 max: ranges.xaxis.to 74 } 75 })); 76 } 77 }); 78 79 placeholder.bind("plotunselected", function (event) { 80 $("#selection").text(""); 81 }); 82 83 var plot = $.plot(placeholder, data, options); 84 85 $("#clearSelection").click(function () { 86 plot.clearSelection(); 87 }); 88 89 $("#setSelection").click(function () { 90 plot.setSelection({ 91 xaxis: { 92 from: 1994, 93 to: 1995 94 } 95 }); 96 }); 97 98 // Add the Flot version string to the footer 99 100 $("#footer").prepend("Flot " + $.plot.version + " – "); 101 }); 102 103 </script> 104 </head> 105 <body> 106 107 <div id="header"> 108 <h2>Selection</h2> 109 </div> 110 111 <div id="content"> 112 113 <div class="demo-container"> 114 <div id="placeholder" class="demo-placeholder"></div> 115 </div> 116 117 <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> 118 119 <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> 120 121 <p>You selected: <span id="selection"></span></p> 122 123 <p>The plot command returns a plot object you can use to control the selection. Click the buttons below.</p> 124 125 <p> 126 <button id="clearSelection">Clear selection</button> 127 <button id="setSelection">Select year 1994</button> 128 </p> 129 130 <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> 131 132 <p><label><input id="zoom" type="checkbox"></input>Zoom to selection.</label></p> 133 134 </div> 135 136 <div id="footer"> 137 Copyright © 2007 - 2013 IOLA and Ole Laursen 138 </div> 139 140 </body> 141 </html>