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