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         '<style>',
  12         '  .chart { width: 500px; height: 300px; }',
  13         '  .chart-container { overflow: hidden; }',
  14         '  #div1 { float: left; }',
  15         '  #div2 { float: left; }',
  16         '  #div3 { float: left; clear: left; }',
  17         '  #div4 { float: left; }',
  18         '</style>',
  19         '<p>Zooming and panning on any of the charts will zoom and pan all the',
  20         'others. Selecting points on one will select points on the others.</p>',
  21         '<p>To use this, source <a href="https://github.com/danvk/dygraphs/blob/master/src/extras/synchronizer.js"><code>extras/synchronizer.js</code></a> on your page.',
  22         'See the comments in that file for usage.</p>',
  23         '<div class="chart-container">',
  24         '  <div id="div1" class="chart"></div>',
  25         '  <div id="div2" class="chart"></div>',
  26         '  <div id="div3" class="chart"></div>',
  27         '  <div id="div4" class="chart"></div>',
  28         '</div>',
  29         '<p>',
  30         '  Synchronize what?',
  31         '  <input type=checkbox id="chk-zoom" checked><label for="chk-zoom"> Zoom</label>',
  32         '  <input type=checkbox id="chk-selection" checked><label for="chk-selection"> Selection</label>',
  33         '</p>'
  34         ].join("\n");
  35     },
  36     run: function() {
  37       var gs = [];
  38       var blockRedraw = false;
  39       for (var i = 1; i <= 4; i++) {
  40         gs.push(
  41           new Dygraph(
  42             document.getElementById("div" + i),
  43             NoisyData, {
  44               rollPeriod: 7,
  45               errorBars: true,
  46             }
  47           )
  48         );
  49       }
  50       var sync = Dygraph.synchronize(gs);
  51
  52       function update() {
  53         var zoom = document.getElementById('chk-zoom').checked;
  54         var selection = document.getElementById('chk-selection').checked;
  55         sync.detach();
  56         sync = Dygraph.synchronize(gs, {
  57           zoom: zoom,
  58           selection: selection
  59         });
  60       }
  61       $('#chk-zoom, #chk-selection').change(update);
  62     }
  63   });