index.html (3473B)
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 and zooming</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 // setup plot 16 17 function getData(x1, x2) { 18 19 var d = []; 20 for (var i = 0; i <= 100; ++i) { 21 var x = x1 + i * (x2 - x1) / 100; 22 d.push([x, Math.sin(x * Math.sin(x))]); 23 } 24 25 return [ 26 { label: "sin(x sin(x))", data: d } 27 ]; 28 } 29 30 var options = { 31 legend: { 32 show: false 33 }, 34 series: { 35 lines: { 36 show: true 37 }, 38 points: { 39 show: true 40 } 41 }, 42 yaxis: { 43 ticks: 10 44 }, 45 selection: { 46 mode: "xy" 47 } 48 }; 49 50 var startData = getData(0, 3 * Math.PI); 51 52 var plot = $.plot("#placeholder", startData, options); 53 54 // Create the overview plot 55 56 var overview = $.plot("#overview", startData, { 57 legend: { 58 show: false 59 }, 60 series: { 61 lines: { 62 show: true, 63 lineWidth: 1 64 }, 65 shadowSize: 0 66 }, 67 xaxis: { 68 ticks: 4 69 }, 70 yaxis: { 71 ticks: 3, 72 min: -2, 73 max: 2 74 }, 75 grid: { 76 color: "#999" 77 }, 78 selection: { 79 mode: "xy" 80 } 81 }); 82 83 // now connect the two 84 85 $("#placeholder").bind("plotselected", function (event, ranges) { 86 87 // clamp the zooming to prevent eternal zoom 88 89 if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) { 90 ranges.xaxis.to = ranges.xaxis.from + 0.00001; 91 } 92 93 if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) { 94 ranges.yaxis.to = ranges.yaxis.from + 0.00001; 95 } 96 97 // do the zooming 98 99 plot = $.plot("#placeholder", getData(ranges.xaxis.from, ranges.xaxis.to), 100 $.extend(true, {}, options, { 101 xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }, 102 yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to } 103 }) 104 ); 105 106 // don't fire event on the overview to prevent eternal loop 107 108 overview.setSelection(ranges, true); 109 }); 110 111 $("#overview").bind("plotselected", function (event, ranges) { 112 plot.setSelection(ranges); 113 }); 114 115 // Add the Flot version string to the footer 116 117 $("#footer").prepend("Flot " + $.plot.version + " – "); 118 }); 119 120 </script> 121 </head> 122 <body> 123 124 <div id="header"> 125 <h2>Selection and zooming</h2> 126 </div> 127 128 <div id="content"> 129 130 <div class="demo-container"> 131 <div id="placeholder" class="demo-placeholder" style="float:left; width:650px;"></div> 132 <div id="overview" class="demo-placeholder" style="float:right;width:160px; height:125px;"></div> 133 </div> 134 135 <p>Selection support makes it easy to construct flexible zooming schemes. With a few lines of code, the small overview plot to the right has been connected to the large plot. Try selecting a rectangle on either of them.</p> 136 137 </div> 138 139 <div id="footer"> 140 Copyright © 2007 - 2013 IOLA and Ole Laursen 141 </div> 142 143 </body> 144 </html>