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="../dist/dygraph.js"></script>
  10     <script type="text/javascript" src="../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/src/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       <input type=checkbox id='chk-range' checked onChange='update()'><label for='chk-range'> Range (y-axis)</label>
  41     </p>
  42
  43     <script type="text/javascript">
  44       gs = [];
  45       var blockRedraw = false;
  46       for (var i = 1; i <= 4; i++) {
  47         gs.push(
  48           new Dygraph(
  49             document.getElementById("div" + i),
  50             NoisyData, {
  51               rollPeriod: 7,
  52               errorBars: true,
  53             }
  54           )
  55         );
  56       }
  57       var sync = Dygraph.synchronize(gs);
  58
  59       function update() {
  60         var zoom = document.getElementById('chk-zoom').checked,
  61             selection = document.getElementById('chk-selection').checked,
  62             syncRange = document.getElementById('chk-range').checked;
  63         document.getElementById('chk-range').disabled = !zoom;
  64
  65         sync.detach();
  66         sync = Dygraph.synchronize(gs, {
  67           zoom: zoom,
  68           selection: selection,
  69           range: syncRange
  70         });
  71       }
  72     </script>
  73   </body>
  74 </html>