Merge pull request #761 from justinsg/master
[dygraphs.git] / 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 })();