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       var initialized = false;
  21       for (var i = 1; i <= 4; i++) {
  22         gs.push(
  23           new Dygraph(
  24             document.getElementById("div" + i),
  25             NoisyData, {
  26               rollPeriod: 7,
  27               errorBars: true,
  28               drawCallback: function(me, initial) {
  29                 if (blockRedraw || initial) return;
  30                 blockRedraw = true;
  31                 var range = me.xAxisRange();
  32                 var yrange = me.yAxisRange();
  33                 for (var j = 0; j < 4; j++) {
  34                   if (gs[j] == me) continue;
  35                   gs[j].updateOptions( {
  36                     dateWindow: range,
  37                     valueRange: yrange
  38                   } );
  39                 }
  40                 blockRedraw = false;
  41               }
  42             }
  43           )
  44         );
  45       }
  46     }
  47   });