gallery/synchronize.js

   1 Gallery.register(
   2   'synchronize',
   3   {
   4     name: 'Synchronization',
   5     title: 'Multiple graphs in sync',
   6     setup: function(parent) {
   7       parent.innerHTML = [
   8         "<p>Zooming and panning on any of the charts will zoom and pan all the",
   9         "others.</p>",
  10         "<p><aside>(zoom: Click and drag, pan: shift-click and drag, unzoom: double-click)</aside></p>",
  11         "<table><tr>",
  12         "<td><div id='div1' style='width:500px; height:300px;'></div></td>",
  13         "<td><div id='div3' style='width:500px; height:300px;'></div></td></tr>",
  14         "<tr><td><div id='div2' style='width:500px; height:300px;'></div></td>",
  15         "<td><div id='div4' style='width:500px; height:300px;'></div></td></table>"].join("\n");
  16     },
  17     run: function() {
  18       gs = [];
  19       var blockRedraw = false;
  20       for (var i = 1; i <= 4; i++) {
  21         gs.push(
  22           new Dygraph(
  23             document.getElementById("div" + i),
  24             NoisyData, {
  25               rollPeriod: 7,
  26               errorBars: true,
  27               drawCallback: function(me, initial) {
  28                 if (blockRedraw || initial) return;
  29                 blockRedraw = true;
  30                 var range = me.xAxisRange();
  31                 var yrange = me.yAxisRange();
  32                 for (var j = 0; j < 4; j++) {
  33                   if (gs[j] == me) continue;
  34                   gs[j].updateOptions( {
  35                     dateWindow: range,
  36                     valueRange: yrange
  37                   } );
  38                 }
  39                 blockRedraw = false;
  40               }
  41             }
  42           )
  43         );
  44       }
  45     }
  46   });