Commit | Line | Data |
---|---|---|
e2a5e398 RK |
1 | Gallery.register( |
2 | 'synchronize', | |
3 | { | |
4 | name: 'Synchronization', | |
5 | title: 'Multiple graphs in sync', | |
6 | setup: function(parent) { | |
605b6119 RK |
7 | parent.innerHTML = [ |
8 | "<p>Zooming and panning on any of the charts will zoom and pan all the", | |
9 | "others.</p>", | |
10 | "<p><aside>(zoom: Click and drag, pan: shift-click and drag, unzoom: double-click)</aside></p>", | |
11 | "<table><tr>", | |
12 | "<td><div id='div1' style='width:500px; height:300px;'></div></td>", | |
13 | "<td><div id='div3' style='width:500px; height:300px;'></div></td></tr>", | |
14 | "<tr><td><div id='div2' style='width:500px; height:300px;'></div></td>", | |
15 | "<td><div id='div4' style='width:500px; height:300px;'></div></td></table>"].join("\n"); | |
e2a5e398 RK |
16 | }, |
17 | run: function() { | |
18 | gs = []; | |
19 | var blockRedraw = false; | |
e2a5e398 RK |
20 | for (var i = 1; i <= 4; i++) { |
21 | gs.push( | |
22 | new Dygraph( | |
23 | document.getElementById("div" + i), | |
24 | NoisyData, { | |
25 | rollPeriod: 7, | |
26 | errorBars: true, | |
27 | drawCallback: function(me, initial) { | |
28 | if (blockRedraw || initial) return; | |
29 | blockRedraw = true; | |
30 | var range = me.xAxisRange(); | |
31 | var yrange = me.yAxisRange(); | |
32 | for (var j = 0; j < 4; j++) { | |
33 | if (gs[j] == me) continue; | |
34 | gs[j].updateOptions( { | |
35 | dateWindow: range, | |
36 | valueRange: yrange | |
37 | } ); | |
38 | } | |
39 | blockRedraw = false; | |
40 | } | |
41 | } | |
42 | ) | |
43 | ); | |
44 | } | |
45 | } | |
46 | }); |