4 <link rel=
"stylesheet" href=
"../dist/dygraph.css">
5 <title>synchronize
</title>
6 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
7 <script type=
"text/javascript" src=
"../src/extras/synchronizer.js"></script>
9 <script type=
"text/javascript" src=
"data.js"></script>
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; }
20 <p>Zooming and panning on any of the charts will zoom and pan all the
21 others. Selecting points on one will select points on the others.
</p>
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.
24 See the comments in that file for usage.
</p>
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>
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>
37 <input type=checkbox id='chk-range' checked onChange='update()'
><label for='chk-range'
> Range (y-axis)
</label>
40 <script type=
"text/javascript">
42 var blockRedraw = false;
43 for (var i =
1; i <=
4; i++) {
46 document.getElementById(
"div" + i),
54 var sync = Dygraph.synchronize(gs);
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;
63 sync = Dygraph.synchronize(gs, {