tests/synchronize.html

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