tests/synchronize.html

   1 <html>
   2   <head>
   3     <title>synchronize</title>
   4     <!--[if IE]>
   5     <script type="text/javascript" src="../excanvas.js"></script>
   6     <![endif]-->
   7     <script type="text/javascript" src="../strftime/strftime-min.js"></script>
   8     <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
   9     <script type="text/javascript" src="../dygraph-canvas.js"></script>
  10     <script type="text/javascript" src="../dygraph.js"></script>
  11     <script type="text/javascript" src="data.js"></script>
  12     <style type="text/css">
  13       #div1 { position: absolute; left: 10px; top: 30px; }
  14       #div2 { position: absolute; left: 520px; top: 30px; }
  15       #div3 { position: absolute; left: 10px; top: 340px; }
  16       #div4 { position: absolute; left: 520px; top: 340px; }
  17     </style>
  18   </head>
  19   <body>
  20     <p>Zooming and panning on any of the charts will zoom and pan all the
  21     others.</p>
  22
  23     <div id="div1" style="width:500px; height:300px;"></div>
  24     <div id="div2" style="width:500px; height:300px;"></div>
  25     <div id="div3" style="width:500px; height:300px;"></div>
  26     <div id="div4" style="width:500px; height:300px;"></div>
  27
  28     <script type="text/javascript">
  29       gs = [];
  30       var blockRedraw = false;
  31       var initialized = false;
  32       for (var i = 1; i <= 4; i++) {
  33         gs.push(
  34           new Dygraph(
  35             document.getElementById("div" + i),
  36             NoisyData, {
  37               rollPeriod: 7,
  38               errorBars: true,
  39               drawCallback: function(me, initial) {
  40                 if (blockRedraw || initial) return;
  41                 blockRedraw = true;
  42                 var range = me.xAxisRange();
  43                 for (var j = 0; j < 4; j++) {
  44                   if (gs[j] == me) continue;
  45                   gs[j].updateOptions( { dateWindow: range } );
  46                 }
  47                 blockRedraw = false;
  48               }
  49             }
  50           )
  51         );
  52       }
  53     </script>
  54   </body>
  55 </html>