Synchronization tool
[dygraphs.git] / tests / synchronize.html
CommitLineData
54425b14 1<!DOCTYPE html>
02f49d0b
DV
2<html>
3 <head>
10494b48 4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
02f49d0b
DV
5 <title>synchronize</title>
6 <!--[if IE]>
a2b2c3a1 7 <script type="text/javascript" src="../excanvas.js"></script>
02f49d0b 8 <![endif]-->
7e5ddc94
DV
9 <!--
10 For production (minified) code, use:
11 <script type="text/javascript" src="dygraph-combined.js"></script>
12 -->
13 <script type="text/javascript" src="../dygraph-dev.js"></script>
8cadc6c9 14 <script type="text/javascript" src="../extras/synchronizer.js"></script>
7e5ddc94 15
02f49d0b
DV
16 <script type="text/javascript" src="data.js"></script>
17 <style type="text/css">
8cadc6c9
DV
18 .chart { width: 500px; height: 300px; }
19 .chart-container { overflow: hidden; }
20 #div1 { float: left; }
21 #div2 { float: left; }
22 #div3 { float: left; clear: left; }
23 #div4 { float: left; }
02f49d0b
DV
24 </style>
25 </head>
26 <body>
27 <p>Zooming and panning on any of the charts will zoom and pan all the
8cadc6c9 28 others. Selecting points on one will select points on the others.</p>
fe0b7c03 29
8cadc6c9
DV
30 <p>To use this, source <a href="https://github.com/danvk/dygraphs/blob/master/extras/synchronizer.js"><code>extras/synchronizer.js</code></a> on your page.
31 See the comments in that file for usage.</p>
32
33 <div class="chart-container">
34 <div id="div1" class="chart"></div>
35 <div id="div2" class="chart"></div>
36 <div id="div3" class="chart"></div>
37 <div id="div4" class="chart"></div>
38 </div>
39
40 <p>
41 Synchronize what?
42 <input type=checkbox id='chk-zoom' checked onChange='update()'><label for='chk-zoom'> Zoom</label>
43 <input type=checkbox id='chk-selection' checked onChange='update()'><label for='chk-selection'> Selection</label>
44 </p>
02f49d0b
DV
45
46 <script type="text/javascript">
47 gs = [];
48 var blockRedraw = false;
02f49d0b
DV
49 for (var i = 1; i <= 4; i++) {
50 gs.push(
51 new Dygraph(
52 document.getElementById("div" + i),
53 NoisyData, {
54 rollPeriod: 7,
55 errorBars: true,
02f49d0b
DV
56 }
57 )
58 );
59 }
8cadc6c9
DV
60 var sync = Dygraph.synchronize(gs);
61
62 function update() {
63 var zoom = document.getElementById('chk-zoom').checked;
64 var selection = document.getElementById('chk-selection').checked;
65 sync.detach();
66 sync = Dygraph.synchronize(gs, {
67 zoom: zoom,
68 selection: selection
69 });
70 }
02f49d0b
DV
71 </script>
72 </body>
73</html>