Bug fix for dygraph point selection touch event.
[dygraphs.git] / tests / synchronize.html
CommitLineData
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>