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
  15     <script type="text/javascript" src="data.js"></script>
  16     <style type="text/css">
  17       #div1 { position: absolute; left: 10px; top: 30px; }
  18       #div2 { position: absolute; left: 520px; top: 30px; }
  19       #div3 { position: absolute; left: 10px; top: 340px; }
  20       #div4 { position: absolute; left: 520px; top: 340px; }
  21     </style>
  22   </head>
  23   <body>
  24     <p>Zooming and panning on any of the charts will zoom and pan all the
  25     others.</p>
  26
  27     <div id="div1" style="width:500px; height:300px;"></div>
  28     <div id="div2" style="width:500px; height:300px;"></div>
  29     <div id="div3" style="width:500px; height:300px;"></div>
  30     <div id="div4" style="width:500px; height:300px;"></div>
  31
  32     <script type="text/javascript">
  33       gs = [];
  34       var blockRedraw = false;
  35       var initialized = false;
  36       for (var i = 1; i <= 4; i++) {
  37         gs.push(
  38           new Dygraph(
  39             document.getElementById("div" + i),
  40             NoisyData, {
  41               rollPeriod: 7,
  42               errorBars: true,
  43               drawCallback: function(me, initial) {
  44                 if (blockRedraw || initial) return;
  45                 blockRedraw = true;
  46                 var range = me.xAxisRange();
  47                 var yrange = me.yAxisRange();
  48                 for (var j = 0; j < 4; j++) {
  49                   if (gs[j] == me) continue;
  50                   gs[j].updateOptions( {
  51                     dateWindow: range,
  52                     valueRange: yrange
  53                   } );
  54                 }
  55                 blockRedraw = false;
  56               }
  57             }
  58           )
  59         );
  60       }
  61     </script>
  62   </body>
  63 </html>