X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;ds=inline;f=gallery%2Fsynchronize.js;h=233da0c245cc39722a65c6e34c8f655d998cff1a;hb=54f4c379dcad2be2e6b2922b9e25e46352ee604d;hp=8e1eb770f8d9e05f6e67c8d5e94c7f8d1bf5710f;hpb=e2a5e39886ea3bec49f24f937bb2625899710328;p=dygraphs.git diff --git a/gallery/synchronize.js b/gallery/synchronize.js index 8e1eb77..233da0c 100644 --- a/gallery/synchronize.js +++ b/gallery/synchronize.js @@ -1,24 +1,41 @@ -// Use this as a template for new Gallery entries. +/*global Gallery,Dygraph,data */ +/*jshint loopfunc:true */ +/*global NoisyData */ Gallery.register( 'synchronize', { name: 'Synchronization', title: 'Multiple graphs in sync', setup: function(parent) { - parent.innerHTML = - "
Zooming and panning on any of the charts will zoom and pan all the" + - "others.
" + - "" + - "" + - " | |
" + - " |
Zooming and panning on any of the charts will zoom and pan all the', + 'others. Selecting points on one will select points on the others.
', + 'To use this, source extras/synchronizer.js
on your page.',
+ 'See the comments in that file for usage.
', + ' Synchronize what?', + ' ', + ' ', + '
' + ].join("\n"); }, run: function() { - gs = []; + var gs = []; var blockRedraw = false; - var initialized = false; for (var i = 1; i <= 4; i++) { gs.push( new Dygraph( @@ -26,23 +43,21 @@ Gallery.register( NoisyData, { rollPeriod: 7, errorBars: true, - drawCallback: function(me, initial) { - if (blockRedraw || initial) return; - blockRedraw = true; - var range = me.xAxisRange(); - var yrange = me.yAxisRange(); - for (var j = 0; j < 4; j++) { - if (gs[j] == me) continue; - gs[j].updateOptions( { - dateWindow: range, - valueRange: yrange - } ); - } - blockRedraw = false; - } } ) ); } + var sync = Dygraph.synchronize(gs); + + function update() { + var zoom = document.getElementById('chk-zoom').checked; + var selection = document.getElementById('chk-selection').checked; + sync.detach(); + sync = Dygraph.synchronize(gs, { + zoom: zoom, + selection: selection + }); + } + $('#chk-zoom, #chk-selection').change(update); } });