| 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <link rel="stylesheet" href="../css/dygraph.css"> |
| 5 | <title>synchronize</title> |
| 6 | <!-- |
| 7 | For production (minified) code, use: |
| 8 | <script type="text/javascript" src="dygraph-combined.js"></script> |
| 9 | --> |
| 10 | <script type="text/javascript" src="../dist/dygraph.js"></script> |
| 11 | <script type="text/javascript" src="../src/extras/synchronizer.js"></script> |
| 12 | |
| 13 | <script type="text/javascript" src="data.js"></script> |
| 14 | <style> |
| 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; } |
| 21 | </style> |
| 22 | </head> |
| 23 | <body> |
| 24 | <p>Zooming and panning on any of the charts will zoom and pan all the |
| 25 | others. Selecting points on one will select points on the others.</p> |
| 26 | |
| 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. |
| 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> |
| 41 | <input type=checkbox id='chk-range' checked onChange='update()'><label for='chk-range'> Range (y-axis)</label> |
| 42 | </p> |
| 43 | |
| 44 | <script type="text/javascript"> |
| 45 | gs = []; |
| 46 | var blockRedraw = false; |
| 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, |
| 54 | } |
| 55 | ) |
| 56 | ); |
| 57 | } |
| 58 | var sync = Dygraph.synchronize(gs); |
| 59 | |
| 60 | function update() { |
| 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 | |
| 66 | sync.detach(); |
| 67 | sync = Dygraph.synchronize(gs, { |
| 68 | zoom: zoom, |
| 69 | selection: selection, |
| 70 | range: syncRange |
| 71 | }); |
| 72 | } |
| 73 | </script> |
| 74 | </body> |
| 75 | </html> |