Synchronize Dygraphs where some have a double y-axis?

Question

I have followed the example on: https://groups.google.com/forum/#!topic/dygraphs-users/9RL8-4-e35Y to synchronize 4 dygraphs. Some of these graphs will have multiple time series. However I would like to have the possibility to use two y axis for some graphs to account for the fact that not all data is on the same (y)scale and I don't want too many unnecessary graphs. Is this possible?

The code I'm using:

<script type="text/javascript">
files = [ "DataFiles/NRTData.csv", "DataFiles/data1.csv", "DataFiles/data1.csv",           "DataFiles/data1.csv" ];
  gs = [];
  var blockRedraw = false;
  for (var i = 1; i <= 4; i++) {
    gs.push(
      new Dygraph(
        document.getElementById("div" + i),
        files[i - 1], {
          rollPeriod: 7,
          //errorBars: true,
      errorBars: false,
          drawCallback: function(me, initial) {
            if (blockRedraw || initial) return;
            blockRedraw = true;
            var range = me.xAxisRange();
            for (var j = 0; j < 4; j++) {
              if (gs[j] == me) continue;
              gs[j].updateOptions( { dateWindow: range } );
            }
            blockRedraw = false;
          }
    }
      )
    );
  }
</script>

I assume I should insert the code below (from another [working] dygraph) somewhere in the code above, however after trying many options I can't get it to work..

       labels: [ 'DateTime', 'a', 'b' ],
        ylabel: 'a ',
        y2label: ' b ',
        series : {
          'a': {
            axis: 'y1',
    errorBars: false,
          },
          'b': {
            axis: 'y2'
          }
        },
        axes: {
          y: {
            // set axis-related properties here
            drawGrid: true,
            independentTicks: true,
    axisLabelColor: 'green'
          },
          y2: {
            // set axis-related properties here
            labelsKMB: true,
            drawGrid: true,
            independentTicks: true,
    axisLabelColor: 'blue'
          },
      x: {
                        axisLabelFormatter: function(d) {
                          return d.strftime('%Y %m-%d %H');                 
      }
      }

Answer 1

Here there is an example jsfiddle

you have to create two object of options

1. opt1 = object with specific options
2. opt2 = object with common options

then, in the code separate function used in drawCallBack

var redraw = function(me, initial) {
    if (blockRedraw || initial) return;
    blockRedraw = true;
    var range = me.xAxisRange();
    for (var j = 0; j < 4; j++) {
        if (gs[j] == me) continue;
        gs[j].updateOptions( { dateWindow: range } );
    }
    blockRedraw = false;
};

var opt1 = {
    // add function to this object too.
    drawCallback: redraw, 
    labels: ['DateTime', 'a', 'b'],
    ylabel: 'a',
    y2label: 'b',
    series : {
        'a': {
            axis: 'y1',
            errorBars: false,
        },
        'b': {
            axis: 'y2'
        }
    },
    axes: {
        y: {
            // set axis-related properties here
            drawGrid: true,
            independentTicks: true,
            axisLabelColor: 'green'
        },
        y2: {
            // set axis-related properties here
            labelsKMB: true,
            drawGrid: true,
            independentTicks: true,
            axisLabelColor: 'blue'
        },
        x: {
            axisLabelFormatter: function(d) {
                return d.strftime('%Y %m-%d %H');                 
            }
        };
};

var opt2 = {
    rollPeriod: 7,
    //errorBars: true,
    errorBars: false,
    drawCallback: redraw
};

for (var i = 1; i <= 4; i++) {
    gs.push(
        new Dygraph(
            document.getElementById("div" + i),
            files[i - 1], 
            // use opt1 in i=1
            (i === 1) ? opt1 : opt2)
        )
    );
}