extras/synchronizer.js

   1 /**
   2  * Synchronize zooming and/or selections between a set of dygraphs.
   3  *
   4  * Usage:
   5  *
   6  *   var g1 = new Dygraph(...),
   7  *       g2 = new Dygraph(...),
   8  *       ...;
   9  *   var sync = Dygraph.synchronize(g1, g2, ...);
  10  *   // charts are now synchronized
  11  *   sync.detach();
  12  *   // charts are no longer synchronized
  13  *
  14  * You can set options using the last parameter, for example:
  15  *
  16  *   var sync = Dygraph.synchronize(g1, g2, g3, {
  17  *      selection: true,
  18  *      zoom: true
  19  *   });
  20  *
  21  * The default is to synchronize both of these.
  22  *
  23  * Instead of passing one Dygraph object as each parameter, you may also pass an
  24  * array of dygraphs:
  25  *
  26  *   var sync = Dygraph.synchronize([g1, g2, g3], {
  27  *      selection: false,
  28  *      zoom: true
  29  *   });
  30  *
  31  * You may also set `range: false` if you wish to only sync the x-axis.
  32  * The `range` option has no effect unless `zoom` is true (the default).
  33  */
  34 (function() {
  35 /* global Dygraph:false */
  36 'use strict';
  37
  38 Dygraph.synchronize = function(/* dygraphs..., opts */) {
  39   if (arguments.length === 0) {
  40     throw 'Invalid invocation of Dygraph.synchronize(). Need >= 1 argument.';
  41   }
  42
  43   var OPTIONS = ['selection', 'zoom', 'range'];
  44   var opts = {
  45     selection: true,
  46     zoom: true,
  47     range: true
  48   };
  49   var dygraphs = [];
  50
  51   var prevCallbacks = {
  52     draw: null,
  53     highlight: null,
  54     unhighlight: null
  55   };
  56
  57   var parseOpts = function(obj) {
  58     if (!(obj instanceof Object)) {
  59       throw 'Last argument must be either Dygraph or Object.';
  60     } else {
  61       for (var i = 0; i < OPTIONS.length; i++) {
  62         var optName = OPTIONS[i];
  63         if (obj.hasOwnProperty(optName)) opts[optName] = obj[optName];
  64       }
  65     }
  66   };
  67
  68   if (arguments[0] instanceof Dygraph) {
  69     // Arguments are Dygraph objects.
  70     for (var i = 0; i < arguments.length; i++) {
  71       if (arguments[i] instanceof Dygraph) {
  72         dygraphs.push(arguments[i]);
  73       } else {
  74         break;
  75       }
  76     }
  77     if (i < arguments.length - 1) {
  78       throw 'Invalid invocation of Dygraph.synchronize(). ' +
  79             'All but the last argument must be Dygraph objects.';
  80     } else if (i == arguments.length - 1) {
  81       parseOpts(arguments[arguments.length - 1]);
  82     }
  83   } else if (arguments[0].length) {
  84     // Invoked w/ list of dygraphs, options
  85     for (var i = 0; i < arguments[0].length; i++) {
  86       dygraphs.push(arguments[0][i]);
  87     }
  88     if (arguments.length == 2) {
  89       parseOpts(arguments[1]);
  90     } else if (arguments.length > 2) {
  91       throw 'Invalid invocation of Dygraph.synchronize(). ' +
  92             'Expected two arguments: array and optional options argument.';
  93     }  // otherwise arguments.length == 1, which is fine.
  94   } else {
  95     throw 'Invalid invocation of Dygraph.synchronize(). ' +
  96           'First parameter must be either Dygraph or list of Dygraphs.';
  97   }
  98
  99   if (dygraphs.length < 2) {
 100     throw 'Invalid invocation of Dygraph.synchronize(). ' +
 101           'Need two or more dygraphs to synchronize.';
 102   }
 103
 104   var readycount = dygraphs.length;
 105   for (var i = 0; i < dygraphs.length; i++) {
 106     var g = dygraphs[i];
 107     g.ready( function() {
 108       if (--readycount == 0) {
 109         // Listen for draw, highlight, unhighlight callbacks.
 110         if (opts.zoom) {
 111           attachZoomHandlers(dygraphs, opts, prevCallbacks);
 112         }
 113
 114         if (opts.selection) {
 115           attachSelectionHandlers(dygraphs, prevCallbacks);
 116         }
 117       }
 118     });
 119   }
 120
 121   return {
 122     detach: function() {
 123       for (var i = 0; i < dygraphs.length; i++) {
 124         var g = dygraphs[i];
 125         if (opts.zoom) {
 126           g.updateOptions({drawCallback: prevCallbacks.draw});
 127         }
 128         if (opts.selection) {
 129           g.updateOptions({
 130             highlightCallback: prevCallbacks.highlight,
 131             unhighlightCallback: prevCallbacks.unhighlight
 132           });
 133         }
 134       }
 135       // release references & make subsequent calls throw.
 136       dygraphs = null;
 137       opts = null;
 138       prevCallbacks = null;
 139     }
 140   };
 141 };
 142
 143 function attachZoomHandlers(gs, syncOpts, prevCallbacks) {
 144   var block = false;
 145   for (var i = 0; i < gs.length; i++) {
 146     var g = gs[i];
 147     prevCallbacks.draw = g.getFunctionOption('drawCallback');
 148     g.updateOptions({
 149       drawCallback: function(me, initial) {
 150         if (prevCallbacks.draw) prevCallbacks.draw(me, initial);
 151         if (block || initial) return;
 152         block = true;
 153         var opts = {
 154           dateWindow: me.xAxisRange()
 155         };
 156         if (syncOpts.range) opts.valueRange = me.yAxisRange();
 157
 158         for (var j = 0; j < gs.length; j++) {
 159           if (gs[j] == me) continue;
 160           gs[j].updateOptions(opts);
 161         }
 162         block = false;
 163       }
 164     }, false /* no need to redraw */);
 165   }
 166 }
 167
 168 function attachSelectionHandlers(gs, prevCallbacks) {
 169   var block = false;
 170   for (var i = 0; i < gs.length; i++) {
 171     var g = gs[i];
 172     prevCallbacks.highlight = g.getFunctionOption('highlightCallback');
 173     prevCallbacks.unhighlight = g.getFunctionOption('unhighlightCallback');
 174     g.updateOptions({
 175       highlightCallback: function(event, x, points, row, seriesName) {
 176         if (prevCallbacks.highlight) {
 177             prevCallbacks.highlight(event, x, points, row, seriesName);
 178         }
 179         if (block) return;
 180         block = true;
 181         var me = this;
 182         for (var i = 0; i < gs.length; i++) {
 183           if (me == gs[i]) continue;
 184           var idx = gs[i].getRowForX(x);
 185           if (idx !== null) {
 186             gs[i].setSelection(idx, seriesName);
 187           }
 188         }
 189         block = false;
 190       },
 191       unhighlightCallback: function(event) {
 192         if (prevCallbacks.unhighlight) prevCallbacks.unhighlight(event);
 193         if (block) return;
 194         block = true;
 195         var me = this;
 196         for (var i = 0; i < gs.length; i++) {
 197           if (me == gs[i]) continue;
 198           gs[i].clearSelection();
 199         }
 200         block = false;
 201       }
 202     });
 203   }
 204 }
 205
 206 })();