html5 boiler plate
[scannr.git] / js / flotr2 / examples / js / examples / mouse-zoom.js
blob:a/js/flotr2/examples/js/examples/mouse-zoom.js -> blob:b/js/flotr2/examples/js/examples/mouse-zoom.js
--- a/js/flotr2/examples/js/examples/mouse-zoom.js
+++ b/js/flotr2/examples/js/examples/mouse-zoom.js
@@ -1,1 +1,64 @@
+(function () {
 
+Flotr.ExampleList.add({
+  key : 'mouse-zoom',
+  name : 'Mouse Zoom',
+  callback : mouse_zoom,
+  description : "<p>Select an area of the graph to zoom.  Click to reset the chart.</p>"
+});
+
+function mouse_zoom (container) {
+
+  var
+    d1 = [],
+    d2 = [],
+    d3 = [],
+    options,
+    graph,
+    i;
+
+  for (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]);
+  }
+      
+  options = {
+    selection : { mode : 'x', fps : 30 },
+    title : 'Mouse Zoom'
+  };
+    
+  // Draw graph with default options, overwriting with passed options
+  function drawGraph (opts) {
+
+    // Clone the options, so the 'options' variable always keeps intact.
+    var o = Flotr._.extend(Flotr._.clone(options), opts || {});
+
+    // Return a new graph.
+    return Flotr.draw(
+      container,
+      [ d1, d2, d3 ],
+      o
+    );
+  }
+
+  // Actually draw the graph.
+  graph = drawGraph();      
+    
+  // Hook into the 'flotr:select' event.
+  Flotr.EventAdapter.observe(container, 'flotr:select', function (area) {
+
+    // Draw graph with new area
+    graph = drawGraph({
+      xaxis: {min:area.x1, max:area.x2},
+      yaxis: {min:area.y1, max:area.y2}
+    });
+  });
+    
+  // When graph is clicked, draw the graph with default area.
+  Flotr.EventAdapter.observe(container, 'flotr:click', function () { drawGraph(); });
+};
+
+})();
+
+