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                 var yrange = me.yAxisRange();
  44                 for (var j = 0; j < 4; j++) {
  45                   if (gs[j] == me) continue;
  46                   gs[j].updateOptions( {
  47                     dateWindow: range,
  48                     valueRange: yrange
  49                   } );
  50                 }
  51                 blockRedraw = false;
  52               }
  53             }
  54           )
  55         );
  56       }
  57     </script>
  58   </body>
  59 </html>