Clear prevCallbacks on detach()
[dygraphs.git] / extras / synchronizer.js
CommitLineData
8cadc6c9
DV
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 *
b94ba4b5 23 * Instead of passing one Dygraph object as each parameter, you may also pass an
8cadc6c9
DV
24 * array of dygraphs:
25 *
26 * var sync = Dygraph.synchronize([g1, g2, g3], {
27 * selection: false,
28 * zoom: true
29 * });
b94ba4b5
DV
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).
8cadc6c9
DV
33 */
34(function() {
35/* global Dygraph:false */
36'use strict';
37
38Dygraph.synchronize = function(/* dygraphs..., opts */) {
39 if (arguments.length === 0) {
40 throw 'Invalid invocation of Dygraph.synchronize(). Need >= 1 argument.';
41 }
42
b94ba4b5 43 var OPTIONS = ['selection', 'zoom', 'range'];
8cadc6c9
DV
44 var opts = {
45 selection: true,
8fd11236 46 zoom: true,
b94ba4b5 47 range: true
8cadc6c9
DV
48 };
49 var dygraphs = [];
50
fab3f9b4 51 var prevCallbacks = {
52 draw: null,
53 highlight: null,
54 unhighlight: null
55 };
56
8cadc6c9
DV
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 // Listen for draw, highlight, unhighlight callbacks.
105 if (opts.zoom) {
fab3f9b4 106 attachZoomHandlers(dygraphs, opts, prevCallbacks);
8cadc6c9
DV
107 }
108
109 if (opts.selection) {
fab3f9b4 110 attachSelectionHandlers(dygraphs, prevCallbacks);
8cadc6c9
DV
111 }
112
113 return {
114 detach: function() {
115 for (var i = 0; i < dygraphs.length; i++) {
116 var g = dygraphs[i];
117 if (opts.zoom) {
fab3f9b4 118 g.updateOptions({drawCallback: prevCallbacks.draw});
8cadc6c9
DV
119 }
120 if (opts.selection) {
121 g.updateOptions({
fab3f9b4 122 highlightCallback: prevCallbacks.highlight,
123 unhighlightCallback: prevCallbacks.unhighlight
8cadc6c9
DV
124 });
125 }
126 }
127 // release references & make subsequent calls throw.
128 dygraphs = null;
129 opts = null;
1ca560d2 130 prevCallbacks = null;
8cadc6c9
DV
131 }
132 };
133};
134
fab3f9b4 135function attachZoomHandlers(gs, syncOpts, prevCallbacks) {
8cadc6c9
DV
136 var block = false;
137 for (var i = 0; i < gs.length; i++) {
138 var g = gs[i];
fab3f9b4 139 prevCallbacks.draw = g.getFunctionOption('drawCallback');
8cadc6c9
DV
140 g.updateOptions({
141 drawCallback: function(me, initial) {
fab3f9b4 142 if (prevCallbacks.draw) prevCallbacks.draw(me, initial);
8cadc6c9
DV
143 if (block || initial) return;
144 block = true;
b94ba4b5
DV
145 var opts = {
146 dateWindow: me.xAxisRange()
147 };
148 if (syncOpts.range) opts.valueRange = me.yAxisRange();
149
8cadc6c9
DV
150 for (var j = 0; j < gs.length; j++) {
151 if (gs[j] == me) continue;
b94ba4b5 152 gs[j].updateOptions(opts);
8cadc6c9
DV
153 }
154 block = false;
155 }
156 }, false /* no need to redraw */);
157 }
158}
159
fab3f9b4 160function attachSelectionHandlers(gs, prevCallbacks) {
8cadc6c9
DV
161 var block = false;
162 for (var i = 0; i < gs.length; i++) {
163 var g = gs[i];
fab3f9b4 164 prevCallbacks.highlight = g.getFunctionOption('highlightCallback');
165 prevCallbacks.unhighlight = g.getFunctionOption('unhighlightCallback');
8cadc6c9
DV
166 g.updateOptions({
167 highlightCallback: function(event, x, points, row, seriesName) {
fab3f9b4 168 if (prevCallbacks.highlight) prevCallbacks.highlight(event, x, points, row, seriesName);
8cadc6c9
DV
169 if (block) return;
170 block = true;
171 var me = this;
172 for (var i = 0; i < gs.length; i++) {
173 if (me == gs[i]) continue;
174 var idx = dygraphsBinarySearch(gs[i], x);
175 if (idx !== null) {
176 gs[i].setSelection(idx, seriesName);
177 }
178 }
179 block = false;
180 },
181 unhighlightCallback: function(event) {
fab3f9b4 182 if (prevCallbacks.unhighlight) prevCallbacks.unhighlight(event);
8cadc6c9
DV
183 if (block) return;
184 block = true;
185 var me = this;
186 for (var i = 0; i < gs.length; i++) {
187 if (me == gs[i]) continue;
188 gs[i].clearSelection();
189 }
190 block = false;
191 }
192 });
193 }
194}
195
196// Returns the index corresponding to xVal, or null if there is none.
197function dygraphsBinarySearch(g, xVal) {
198 var low = 0,
199 high = g.numRows() - 1;
200
201 while (low < high) {
202 var idx = (high + low) >> 1;
203 var x = g.getValue(idx, 0);
204 if (x < xVal) {
205 low = idx + 1;
206 } else if (x > xVal) {
207 high = idx - 1;
208 } else {
209 return idx;
210 }
211 }
212
213 // TODO: give an option to find the closest point, i.e. not demand an exact match.
214 return null;
215}
216
217})();