Merge pull request #309 from hulkholden/hidpi
[dygraphs.git] / gallery / synchronize.js
CommitLineData
e88a95b4 1/*global Gallery,Dygraph,data */
e1e80cce 2/*jshint loopfunc:true */
e88a95b4 3/*global NoisyData */
e2a5e398
RK
4Gallery.register(
5 'synchronize',
6 {
7 name: 'Synchronization',
8 title: 'Multiple graphs in sync',
9 setup: function(parent) {
605b6119
RK
10 parent.innerHTML = [
11 "<p>Zooming and panning on any of the charts will zoom and pan all the",
12 "others.</p>",
13 "<p><aside>(zoom: Click and drag, pan: shift-click and drag, unzoom: double-click)</aside></p>",
14 "<table><tr>",
15 "<td><div id='div1' style='width:500px; height:300px;'></div></td>",
16 "<td><div id='div3' style='width:500px; height:300px;'></div></td></tr>",
17 "<tr><td><div id='div2' style='width:500px; height:300px;'></div></td>",
18 "<td><div id='div4' style='width:500px; height:300px;'></div></td></table>"].join("\n");
e2a5e398
RK
19 },
20 run: function() {
e88a95b4 21 var gs = [];
e2a5e398 22 var blockRedraw = false;
e2a5e398
RK
23 for (var i = 1; i <= 4; i++) {
24 gs.push(
25 new Dygraph(
26 document.getElementById("div" + i),
27 NoisyData, {
28 rollPeriod: 7,
29 errorBars: true,
30 drawCallback: function(me, initial) {
31 if (blockRedraw || initial) return;
32 blockRedraw = true;
33 var range = me.xAxisRange();
34 var yrange = me.yAxisRange();
35 for (var j = 0; j < 4; j++) {
36 if (gs[j] == me) continue;
37 gs[j].updateOptions( {
38 dateWindow: range,
39 valueRange: yrange
40 } );
41 }
42 blockRedraw = false;
43 }
44 }
45 )
46 );
47 }
48 }
49 });