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