--- a/js/flotr2/examples/old_examples/mouse-zoom-preview.html +++ b/js/flotr2/examples/old_examples/mouse-zoom-preview.html @@ -1,1 +1,139 @@ +<!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> +