tests/synchronize.html

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