Commit | Line | Data |
---|---|---|
54425b14 | 1 | <!DOCTYPE html> |
02f49d0b DV |
2 | <html> |
3 | <head> | |
fd6b8dad | 4 | <link rel="stylesheet" href="../dist/dygraph.css"> |
02f49d0b | 5 | <title>synchronize</title> |
fbd6834a | 6 | <script type="text/javascript" src="../dist/dygraph.js"></script> |
56629a7e | 7 | <script type="text/javascript" src="../src/extras/synchronizer.js"></script> |
7e5ddc94 | 8 | |
02f49d0b | 9 | <script type="text/javascript" src="data.js"></script> |
0dd82a21 | 10 | <style> |
8cadc6c9 DV |
11 | .chart { width: 500px; height: 300px; } |
12 | .chart-container { overflow: hidden; } | |
13 | #div1 { float: left; } | |
14 | #div2 { float: left; } | |
15 | #div3 { float: left; clear: left; } | |
16 | #div4 { float: left; } | |
02f49d0b DV |
17 | </style> |
18 | </head> | |
19 | <body> | |
20 | <p>Zooming and panning on any of the charts will zoom and pan all the | |
8cadc6c9 | 21 | others. Selecting points on one will select points on the others.</p> |
fe0b7c03 | 22 | |
56629a7e | 23 | <p>To use this, source <a href="https://github.com/danvk/dygraphs/blob/master/src/extras/synchronizer.js"><code>extras/synchronizer.js</code></a> on your page. |
8cadc6c9 DV |
24 | See the comments in that file for usage.</p> |
25 | ||
26 | <div class="chart-container"> | |
27 | <div id="div1" class="chart"></div> | |
28 | <div id="div2" class="chart"></div> | |
29 | <div id="div3" class="chart"></div> | |
30 | <div id="div4" class="chart"></div> | |
31 | </div> | |
32 | ||
33 | <p> | |
34 | Synchronize what? | |
35 | <input type=checkbox id='chk-zoom' checked onChange='update()'><label for='chk-zoom'> Zoom</label> | |
36 | <input type=checkbox id='chk-selection' checked onChange='update()'><label for='chk-selection'> Selection</label> | |
b94ba4b5 | 37 | <input type=checkbox id='chk-range' checked onChange='update()'><label for='chk-range'> Range (y-axis)</label> |
8cadc6c9 | 38 | </p> |
02f49d0b DV |
39 | |
40 | <script type="text/javascript"> | |
41 | gs = []; | |
42 | var blockRedraw = false; | |
02f49d0b DV |
43 | for (var i = 1; i <= 4; i++) { |
44 | gs.push( | |
45 | new Dygraph( | |
46 | document.getElementById("div" + i), | |
47 | NoisyData, { | |
48 | rollPeriod: 7, | |
49 | errorBars: true, | |
02f49d0b DV |
50 | } |
51 | ) | |
52 | ); | |
53 | } | |
8cadc6c9 DV |
54 | var sync = Dygraph.synchronize(gs); |
55 | ||
56 | function update() { | |
b94ba4b5 DV |
57 | var zoom = document.getElementById('chk-zoom').checked, |
58 | selection = document.getElementById('chk-selection').checked, | |
59 | syncRange = document.getElementById('chk-range').checked; | |
60 | document.getElementById('chk-range').disabled = !zoom; | |
61 | ||
8cadc6c9 DV |
62 | sync.detach(); |
63 | sync = Dygraph.synchronize(gs, { | |
64 | zoom: zoom, | |
b94ba4b5 DV |
65 | selection: selection, |
66 | range: syncRange | |
8cadc6c9 DV |
67 | }); |
68 | } | |
02f49d0b DV |
69 | </script> |
70 | </body> | |
71 | </html> |