tests/synchronize.html

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