tests/old-yrange-behavior.html

   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>