4 <meta http-equiv=
"X-UA-Compatible" content=
"IE=EmulateIE7; IE=EmulateIE9">
5 <title>synchronize
</title>
7 <script type=
"text/javascript" src=
"../excanvas.js"></script>
10 For production (minified) code, use:
11 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
13 <script type=
"text/javascript" src=
"../dygraph-dev.js"></script>
14 <script type=
"text/javascript" src=
"../extras/synchronizer.js"></script>
16 <script type=
"text/javascript" src=
"data.js"></script>
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; }
27 <p>Zooming and panning on any of the charts will zoom and pan all the
28 others. Selecting points on one will select points on the others.
</p>
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>
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>
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>
46 <script type=
"text/javascript">
48 var blockRedraw = false;
49 for (var i =
1; i <=
4; i++) {
52 document.getElementById(
"div" + i),
60 var sync = Dygraph.synchronize(gs);
63 var zoom = document.getElementById('chk-zoom').checked;
64 var selection = document.getElementById('chk-selection').checked;
66 sync = Dygraph.synchronize(gs, {