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