1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Flot Examples</title> <link href="layout.css" rel="stylesheet" type="text/css"></link> <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]--> <script language="javascript" type="text/javascript" src="../jquery.js"></script> <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> <script language="javascript" type="text/javascript" src="../jquery.flot.navigate.js"></script> <style> #placeholder .button { position: absolute; cursor: pointer; } #placeholder div.button { font-size: smaller; color: #999; background-color: #eee; padding: 2px; } .message { padding-left: 50px; font-size: smaller; } </style> </head> <body> <h1>Flot Examples</h1> <div id="placeholder" style="width:600px;height:300px;"></div> <p class="message"></p> <p>With the navigate plugin it is easy to add panning and zooming. Drag to pan, double click to zoom (or use the mouse scrollwheel).</p> <p>The plugin fires events (useful for synchronizing several plots) and adds a couple of public methods so you can easily build a little user interface around it, like the little buttons at the top right in the plot.</p> <script id="source" language="javascript" type="text/javascript"> $(function () { // generate data set from a parametric function with a fractal // look function sumf(f, t, m) { var res = 0; for (var i = 1; i < m; ++i) res += f(i * i * t) / (i * i); return res; } var d1 = []; for (var t = 0; t <= 2 * Math.PI; t += 0.01) d1.push([sumf(Math.cos, t, 10), sumf(Math.sin, t, 10)]); var data = [ d1 ]; var placeholder = $("#placeholder"); var options = { series: { lines: { show: true }, shadowSize: 0 }, xaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] }, yaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] }, zoom: { interactive: true }, pan: { interactive: true } }; var plot = $.plot(placeholder, data, options); // show pan/zoom messages to illustrate events placeholder.bind('plotpan', function (event, plot) { var axes = plot.getAxes(); $(".message").html("Panning to x: " + axes.xaxis.min.toFixed(2) + " – " + axes.xaxis.max.toFixed(2) + " and y: " + axes.yaxis.min.toFixed(2) + " – " + axes.yaxis.max.toFixed(2)); }); placeholder.bind('plotzoom', function (event, plot) { var axes = plot.getAxes(); $(".message").html("Zooming to x: " + axes.xaxis.min.toFixed(2) + " – " + axes.xaxis.max.toFixed(2) + " and y: " + axes.yaxis.min.toFixed(2) + " – " + axes.yaxis.max.toFixed(2)); }); // add zoom out button $('<div class="button" style="right:20px;top:20px">zoom out</div>').appendTo(placeholder).click(function (e) { e.preventDefault(); plot.zoomOut(); }); // and add panning buttons // little helper for taking the repetitive work out of placing // panning arrows function addArrow(dir, right, top, offset) { $('<img class="button" src="arrow-' + dir + '.gif" style="right:' + right + 'px;top:' + top + 'px">').appendTo(placeholder).click(function (e) { e.preventDefault(); plot.pan(offset); }); } addArrow('left', 55, 60, { left: -100 }); addArrow('right', 25, 60, { left: 100 }); addArrow('up', 40, 45, { top: -100 }); addArrow('down', 40, 75, { top: 100 }); }); </script> </body> </html> |