| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <title>Flotr: Mouse Zoom With Preview Example</title> | |
| <link rel="stylesheet" href="style.css" type="text/css" /> | |
| <script type="text/javascript" src="../lib/yepnope.js"></script> | |
| </head> | |
| <body> | |
| <!-- ad --> | |
| <div id="wrapper"> | |
| <h1></h1> | |
| <div id="overview" style="width:200px;height:100px;float:right;"></div> | |
| <div id="container" style="width:500px;height:250px;"></div> | |
| <h2>Example</h2> | |
| <p>This example show an enhancement of the mouse-zoom example. It displays an overview of the graph. By selecting an area in the graph or in the overview, the graph is zoomed. Read more about the <a href="http://www.solutoire.com/flotr/docs/eventhooks/" title="Flotr Event Hooks">event hooks</a>.</p> | |
| <p>Finished? Go to the example <a href="index.html" title="Flotr Example Index Page">index page</a>, play with the <a href="../../playground/index.html" title="Flotr playground">playground</a> or read the <a href="http://www.solutoire.com/flotr/docs/" title="Flotr Documentation Pages">Flotr Documentation Pages</a>.</p> | |
| <p><button id="reset-btn">Reset</button></p> | |
| <h2>The Code</h2> | |
| <pre id="code-view"><code class="javascript"></code></pre> | |
| <div id="footer">Copyright © 2008 Bas Wenneker, <a href="http://www.solutoire.com">solutoire.com</a></div> | |
| </div> | |
| <!-- ad --> | |
| <script type="text/javascript"> | |
| function example(){ | |
| var container = document.getElementById('container'), | |
| overviewContainer = document.getElementById('overview'); | |
| /** | |
| * Fill series d1 and d2. | |
| */ | |
| var d1 = []; | |
| var d2 = []; | |
| var d3 = []; | |
| for(var i = 0; i < 40; i += 0.5){ | |
| d1.push([i, Math.sin(i)+3*Math.cos(i)]); | |
| d2.push([i, Math.pow(1.1, i)]); | |
| d3.push([i, 40 - i+Math.random()*10]); | |
| } | |
| /** | |
| * Global options object. | |
| */ | |
| var options = { | |
| selection: { mode:'xy', fps:30 } | |
| }; | |
| // setup overview | |
| var overviewOptions = { | |
| lines: { show: true, lineWidth: 1 }, | |
| shadowSize: 0, | |
| grid: { color: '#999', outlineWidth: 1 }, | |
| selection: { mode: 'xy' } | |
| }; | |
| /** | |
| * Function displays a graph in the 'container' element, extending | |
| * the global options object with the optionally passed options. | |
| */ | |
| function drawGraph(opts){ | |
| /** | |
| * Clone the options, so the 'options' variable always keeps intact. | |
| */ | |
| var o = _.extend(_.clone(options), opts || {}); | |
| /** | |
| * Return a new graph. | |
| */ | |
| return Flotr.draw( | |
| container, | |
| [ d1, d2, d3 ], | |
| o | |
| ); | |
| } | |
| /** | |
| * Function displays a graph in the 'overview' element. | |
| */ | |
| function drawOverview(){ | |
| return Flotr.draw( | |
| overviewContainer, | |
| [ d1, d2, d3 ], | |
| overviewOptions | |
| ); | |
| } | |
| /** | |
| * Actually draw the graphs. | |
| */ | |
| var f = drawGraph(); | |
| var overview = drawOverview(); | |
| /** | |
| * Hook into the 'flotr:select' event. | |
| */ | |
| Flotr.EventAdapter.observe(container, 'flotr:select', function(area){ | |
| /** | |
| * Do the zooming. | |
| */ | |
| f = drawGraph({ | |
| xaxis: {min:area.x1, max:area.x2}, | |
| yaxis: {min:area.y1, max:area.y2} | |
| }); | |
| // don't fire event on the overview to prevent eternal loop | |
| overview.setSelection(area, true); | |
| }); | |
| /** | |
| * Hook into the 'flotr:select' event from overview. | |
| */ | |
| Flotr.EventAdapter.observe(overview, 'flotr:select', function(evt){ | |
| f.setSelection(evt.memo[0]); | |
| }); | |
| /** | |
| * Observe click event on the reset-btn. Reset the graph when clicked. | |
| * The drawGraph function wrapped in another function otherwise it get's | |
| * an Event object passed as first argument, while it expects an options | |
| * object. | |
| */ | |
| document.getElementById('reset-btn').onclick = function(){ | |
| drawGraph(); | |
| drawOverview(); | |
| }; | |
| }; | |
| </script> | |
| <!-- analytics --> | |
| </body> | |
| <script type="text/javascript" src="includes.js"></script> | |
| </html> | |