tests/synchronize.html

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