src/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 var Dygraph;
  39 if (window.Dygraph) {
  40   Dygraph = window.Dygraph;
  41 } else if (typeof(module) !== 'undefined') {
  42   Dygraph = require('../dygraph');
  43 }
  44
  45 var synchronize = function(/* dygraphs..., opts */) {
  46   if (arguments.length === 0) {
  47     throw 'Invalid invocation of Dygraph.synchronize(). Need >= 1 argument.';
  48   }
  49
  50   var OPTIONS = ['selection', 'zoom', 'range'];
  51   var opts = {
  52     selection: true,
  53     zoom: true,
  54     range: true
  55   };
  56   var dygraphs = [];
  57   var prevCallbacks = [];
  58
  59   var parseOpts = function(obj) {
  60     if (!(obj instanceof Object)) {
  61       throw 'Last argument must be either Dygraph or Object.';
  62     } else {
  63       for (var i = 0; i < OPTIONS.length; i++) {
  64         var optName = OPTIONS[i];
  65         if (obj.hasOwnProperty(optName)) opts[optName] = obj[optName];
  66       }
  67     }
  68   };
  69
  70   if (arguments[0] instanceof Dygraph) {
  71     // Arguments are Dygraph objects.
  72     for (var i = 0; i < arguments.length; i++) {
  73       if (arguments[i] instanceof Dygraph) {
  74         dygraphs.push(arguments[i]);
  75       } else {
  76         break;
  77       }
  78     }
  79     if (i < arguments.length - 1) {
  80       throw 'Invalid invocation of Dygraph.synchronize(). ' +
  81             'All but the last argument must be Dygraph objects.';
  82     } else if (i == arguments.length - 1) {
  83       parseOpts(arguments[arguments.length - 1]);
  84     }
  85   } else if (arguments[0].length) {
  86     // Invoked w/ list of dygraphs, options
  87     for (var i = 0; i < arguments[0].length; i++) {
  88       dygraphs.push(arguments[0][i]);
  89     }
  90     if (arguments.length == 2) {
  91       parseOpts(arguments[1]);
  92     } else if (arguments.length > 2) {
  93       throw 'Invalid invocation of Dygraph.synchronize(). ' +
  94             'Expected two arguments: array and optional options argument.';
  95     }  // otherwise arguments.length == 1, which is fine.
  96   } else {
  97     throw 'Invalid invocation of Dygraph.synchronize(). ' +
  98           'First parameter must be either Dygraph or list of Dygraphs.';
  99   }
 100
 101   if (dygraphs.length < 2) {
 102     throw 'Invalid invocation of Dygraph.synchronize(). ' +
 103           'Need two or more dygraphs to synchronize.';
 104   }
 105
 106   var readycount = dygraphs.length;
 107   for (var i = 0; i < dygraphs.length; i++) {
 108     var g = dygraphs[i];
 109     g.ready( function() {
 110       if (--readycount == 0) {
 111         // store original callbacks
 112         var callBackTypes = ['drawCallback', 'highlightCallback', 'unhighlightCallback'];
 113         for (var j = 0; j < dygraphs.length; j++) {
 114           if (!prevCallbacks[j]) {
 115             prevCallbacks[j] = {};
 116           }
 117           for (var k = callBackTypes.length - 1; k >= 0; k--) {
 118             prevCallbacks[j][callBackTypes[k]] = dygraphs[j].getFunctionOption(callBackTypes[k]);
 119           }
 120         }
 121
 122         // Listen for draw, highlight, unhighlight callbacks.
 123         if (opts.zoom) {
 124           attachZoomHandlers(dygraphs, opts, prevCallbacks);
 125         }
 126
 127         if (opts.selection) {
 128           attachSelectionHandlers(dygraphs, prevCallbacks);
 129         }
 130       }
 131     });
 132   }
 133
 134   return {
 135     detach: function() {
 136       for (var i = 0; i < dygraphs.length; i++) {
 137         var g = dygraphs[i];
 138         if (opts.zoom) {
 139           g.updateOptions({drawCallback: prevCallbacks[i].drawCallback});
 140         }
 141         if (opts.selection) {
 142           g.updateOptions({
 143             highlightCallback: prevCallbacks[i].highlightCallback,
 144             unhighlightCallback: prevCallbacks[i].unhighlightCallback
 145           });
 146         }
 147       }
 148       // release references & make subsequent calls throw.
 149       dygraphs = null;
 150       opts = null;
 151       prevCallbacks = null;
 152     }
 153   };
 154 };
 155
 156 function arraysAreEqual(a, b) {
 157   if (!Array.isArray(a) || !Array.isArray(b)) return false;
 158   var i = a.length;
 159   if (i !== b.length) return false;
 160   while (i--) {
 161     if (a[i] !== b[i]) return false;
 162   }
 163   return true;
 164 }
 165
 166 function attachZoomHandlers(gs, syncOpts, prevCallbacks) {
 167   var block = false;
 168   for (var i = 0; i < gs.length; i++) {
 169     var g = gs[i];
 170     g.updateOptions({
 171       drawCallback: function(me, initial) {
 172         if (block || initial) return;
 173         block = true;
 174         var opts = {
 175           dateWindow: me.xAxisRange()
 176         };
 177         if (syncOpts.range) opts.valueRange = me.yAxisRange();
 178
 179         for (var j = 0; j < gs.length; j++) {
 180           if (gs[j] == me) {
 181             if (prevCallbacks[j] && prevCallbacks[j].drawCallback) {
 182               prevCallbacks[j].drawCallback.apply(this, arguments);
 183             }
 184             continue;
 185           }
 186
 187           // Only redraw if there are new options
 188           if (arraysAreEqual(opts.dateWindow, gs[j].getOption('dateWindow')) &&
 189               arraysAreEqual(opts.valueRange, gs[j].getOption('valueRange'))) {
 190             continue;
 191           }
 192
 193           gs[j].updateOptions(opts);
 194         }
 195         block = false;
 196       }
 197     }, true /* no need to redraw */);
 198   }
 199 }
 200
 201 function attachSelectionHandlers(gs, prevCallbacks) {
 202   var block = false;
 203   for (var i = 0; i < gs.length; i++) {
 204     var g = gs[i];
 205
 206     g.updateOptions({
 207       highlightCallback: function(event, x, points, row, seriesName) {
 208         if (block) return;
 209         block = true;
 210         var me = this;
 211         for (var i = 0; i < gs.length; i++) {
 212           if (me == gs[i]) {
 213             if (prevCallbacks[i] && prevCallbacks[i].highlightCallback) {
 214               prevCallbacks[i].highlightCallback.apply(this, arguments);
 215             }
 216             continue;
 217           }
 218           var idx = gs[i].getRowForX(x);
 219           if (idx !== null) {
 220             gs[i].setSelection(idx, seriesName);
 221           }
 222         }
 223         block = false;
 224       },
 225       unhighlightCallback: function(event) {
 226         if (block) return;
 227         block = true;
 228         var me = this;
 229         for (var i = 0; i < gs.length; i++) {
 230           if (me == gs[i]) {
 231             if (prevCallbacks[i] && prevCallbacks[i].unhighlightCallback) {
 232               prevCallbacks[i].unhighlightCallback.apply(this, arguments);
 233             }
 234             continue;
 235           }
 236           gs[i].clearSelection();
 237         }
 238         block = false;
 239       }
 240     }, true /* no need to redraw */);
 241   }
 242 }
 243
 244 Dygraph.synchronize = synchronize;
 245
 246 })();