Official dygraphs.com synchronize.html demo is busted: my version too

Question

I refer to http://dygraphs.com/tests/synchronize.html.

Right now my own implementation is also giving me fits, which isn't surprising since I developed it as an edited version of the official example.

Try this: upon page load go to any of the four graphs and in the middle at a skinny section do a zoom in (click-drag from left to right); then double-click.

What happened? You zoomed in and the traces filled the graph vertically, but for a little bit of padding--- automatic scaling. And then upon zooming out with the double-click everything appeared to be as before. Ahh... but it wasn't and still isn't unless you've reloaded the page.

Now move to any OTHER of the four graphs and repeat the first step... zoom in at a the same skinny spot (the data happen to be the same for each of these graphs). Notice that the automatic vertical scaling is missing. And that's a permanent condition in all four charts until you reload the page.

This is with the latest version of Firefox on Ubuntu 12.04 LTS. You can see the Javascript by just looking at the web page source. I have been thinking that it has to do with the causal use of the blockRedraw boolean, but my more complicated efforts with that have yet to pan out.

Answer 1

I do believe that it's most appropriate for me to answer my own question, though it is a bit awkward. I burned a number of hours on this simple thing since posting the question. Here's the code and the answer:

`    <script type="text/javascript">
  gs = [];
  var blockRedraw = false;
  var initialized = false;
  for (var i = 1; i <= 4; i++) {
    gs.push(
      new Dygraph(
        document.getElementById("div" + i),
        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;
          }
        }
      )
    );
  }
</script>`

The code there is copied directly off of the dygraphs.com synchronize.html page except that I've commented out var yrange = me.yAxisRange() and also the valueRange part of the updateOptions() argument.

Apparently if you put those range values in there you are forestalling the auto scaling from happening. I don't really know what's happening under the hood but that seems to be the deal. It solves the problem for my own analogous implementation. (That is, I found that the jsfiddle version that dygraphs.com has provided doesn't actually draw the graphs, making it useless for testing. So I have only tested this on my version which is really almost the same.)