Commit | Line | Data |
---|---|---|
aa0b189f DV |
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> |