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