gallery/synchronize.js

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