Merge pull request #725 from timeu/patch-2
[dygraphs.git] / tests / synchronize.html
CommitLineData
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>