tests/synchronize.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../dist/dygraph.css">
   5     <title>synchronize</title>
   6     <script type="text/javascript" src="../dist/dygraph.js"></script>
   7     <script type="text/javascript" src="../src/extras/synchronizer.js"></script>
   8
   9     <script type="text/javascript" src="data.js"></script>
  10     <style>
  11       .chart { width: 500px; height: 300px; }
  12       .chart-container { overflow: hidden; }
  13       #div1 { float: left; }
  14       #div2 { float: left; }
  15       #div3 { float: left; clear: left; }
  16       #div4 { float: left; }
  17     </style>
  18   </head>
  19   <body>
  20     <p>Zooming and panning on any of the charts will zoom and pan all the
  21     others. Selecting points on one will select points on the others.</p>
  22
  23     <p>To use this, source <a href="https://github.com/danvk/dygraphs/blob/master/src/extras/synchronizer.js"><code>extras/synchronizer.js</code></a> on your page.
  24     See the comments in that file for usage.</p>
  25
  26     <div class="chart-container">
  27       <div id="div1" class="chart"></div>
  28       <div id="div2" class="chart"></div>
  29       <div id="div3" class="chart"></div>
  30       <div id="div4" class="chart"></div>
  31     </div>
  32
  33     <p>
  34       Synchronize what?
  35       <input type=checkbox id='chk-zoom' checked onChange='update()'><label for='chk-zoom'> Zoom</label>
  36       <input type=checkbox id='chk-selection' checked onChange='update()'><label for='chk-selection'> Selection</label>
  37       <input type=checkbox id='chk-range' checked onChange='update()'><label for='chk-range'> Range (y-axis)</label>
  38     </p>
  39
  40     <script type="text/javascript">
  41       gs = [];
  42       var blockRedraw = false;
  43       for (var i = 1; i <= 4; i++) {
  44         gs.push(
  45           new Dygraph(
  46             document.getElementById("div" + i),
  47             NoisyData, {
  48               rollPeriod: 7,
  49               errorBars: true,
  50             }
  51           )
  52         );
  53       }
  54       var sync = Dygraph.synchronize(gs);
  55
  56       function update() {
  57         var zoom = document.getElementById('chk-zoom').checked,
  58             selection = document.getElementById('chk-selection').checked,
  59             syncRange = document.getElementById('chk-range').checked;
  60         document.getElementById('chk-range').disabled = !zoom;
  61
  62         sync.detach();
  63         sync = Dygraph.synchronize(gs, {
  64           zoom: zoom,
  65           selection: selection,
  66           range: syncRange
  67         });
  68       }
  69     </script>
  70   </body>
  71 </html>