gallery/synchronize.js

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