| 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <link rel="stylesheet" href="../dist/dygraph.css"> |
| 5 | <title>Old y-axis range behavior</title> |
| 6 | |
| 7 | <script type="text/javascript" src="../dist/dygraph.js"></script> |
| 8 | <script src="data.js"></script> |
| 9 | </head> |
| 10 | <body> |
| 11 | <h2>Old y-axis range behavior</h2> |
| 12 | <p>In dygraphs 1.x, if you set a <code>valueRange</code> for the y-axis, zoomed in and then double-clicked to zoom out, then the chart would zoom out to the <code>valueRange</code> that you specified.</p> |
| 13 | <p>Starting with dygraphs 2, double-clicking will zoom out to the full range of the chart's data. This makes the x- and y-axes behave identically.</p> |
| 14 | <p>This demo shows you how to get the old behavior in dygraphs 2 using a plugin. View source to see how.</p> |
| 15 | |
| 16 | <div id="demodiv" style="width: 800px; height: 300px;"></div> |
| 17 | <div id="demodiv2" style="width: 800px; height: 300px;"></div> |
| 18 | |
| 19 | <script type="text/javascript"> |
| 20 | const doubleClickZoomOutPlugin = { |
| 21 | activate: function(g) { |
| 22 | // Save the initial y-axis range for later. |
| 23 | const initialValueRange = g.getOption('valueRange'); |
| 24 | return { |
| 25 | dblclick: e => { |
| 26 | e.dygraph.updateOptions({ |
| 27 | dateWindow: null, // zoom all the way out |
| 28 | valueRange: initialValueRange // zoom to a specific y-axis range. |
| 29 | }); |
| 30 | e.preventDefault(); // prevent the default zoom out action. |
| 31 | } |
| 32 | } |
| 33 | } |
| 34 | } |
| 35 | |
| 36 | var gCustom = new Dygraph( |
| 37 | document.getElementById("demodiv"), |
| 38 | NoisyData, |
| 39 | { |
| 40 | legend: 'always', |
| 41 | title: 'Custom y-axis range on zoom out', |
| 42 | errorBars: true, |
| 43 | valueRange: [2, 6], |
| 44 | plugins: [ |
| 45 | doubleClickZoomOutPlugin |
| 46 | ], |
| 47 | animatedZooms: true |
| 48 | } |
| 49 | ); |
| 50 | |
| 51 | var gDefault = new Dygraph( |
| 52 | document.getElementById("demodiv2"), |
| 53 | NoisyData, |
| 54 | { |
| 55 | legend: 'always', |
| 56 | title: 'Default y-axis range on zoom out', |
| 57 | errorBars: true, |
| 58 | valueRange: [2, 6], |
| 59 | animatedZooms: true |
| 60 | } |
| 61 | ); |
| 62 | </script> |
| 63 | </body> |
| 64 | </html> |