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 | (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(); }); }; })(); |