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