- <div id="div1" style="width:500px; height:300px;"></div>
- <div id="div2" style="width:500px; height:300px;"></div>
- <div id="div3" style="width:500px; height:300px;"></div>
- <div id="div4" style="width:500px; height:300px;"></div>
+ <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.
+ See the comments in that file for usage.</p>
+
+ <div class="chart-container">
+ <div id="div1" class="chart"></div>
+ <div id="div2" class="chart"></div>
+ <div id="div3" class="chart"></div>
+ <div id="div4" class="chart"></div>
+ </div>
+
+ <p>
+ Synchronize what?
+ <input type=checkbox id='chk-zoom' checked onChange='update()'><label for='chk-zoom'> Zoom</label>
+ <input type=checkbox id='chk-selection' checked onChange='update()'><label for='chk-selection'> Selection</label>
+ <input type=checkbox id='chk-range' checked onChange='update()'><label for='chk-range'> Range (y-axis)</label>
+ </p>