Flot zoom mode not updating programmatically

Question

I am trying to switch the zoom mode between "x" and "y" based what the selection in a radio button group is. Selecting the "y" mode is not changing the direction of zooming.

Can anyone find what is wrong in the fiddle below? If I were to manually change mode to "y", xaxis.zoomRange to false, and yaxis.zoomRange to null, I can zoom along only the y-axis, but repeating the same steps programmatically does not have the same effect.

http://jsfiddle.net/apandit/que5w852/

HTML:

<div id='plot' style='width:1000px;height:375px;'></div>
<input type='radio' name='zoomDir' value='x' onclick='setZoomDirection(this)' checked>Zoom in X Direction
<input type='radio' name='zoomDir' value='y' onclick='setZoomDirection(this)'>Zoom in Y Direction

JS:

var datasets = [[
                    [0,0],[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9]
                ],
                [
                    [0,0],[-1,-1],[-2,-2],[-3,-3],[-4,-4],[-5,-5],[-6,-6],[-7,-7],[-8,-8],[-9,-9]
                ]];

var plot = $.plot("#plot",datasets,{
        pan: {
          interactive: true
        },
        zoom: {
          interactive: true,
          mode: "x"
        },
        xaxis: {
            zoomRange: null
        },
        yaxis: {
            zoomRange: false
        }
    });

function setZoomDirection(radioBtn) {
    var options = plot.getOptions();
    var data = plot.getData();

    options.zoom.mode = radioBtn.value;

    if(radioBtn.value == 'y') {
        options.xaxis.zoomRange = false;
        options.yaxis.zoomRange = null;
    }
    else {
        options.yaxis.zoomRange = false;
        options.xaxis.zoomRange = null;
    }

    plot = $.plot("#plot",data,options);
};

Answer 1

1) Your setZoomDirection function was not called because it was in another scope then your inline onclick handlers in the html. I changed it to a jQuery event handler.

2) Internally flot uses options.xaxes[0] instead of options.xaxis. Just replace these lines and you get the experted result:

if (this.value == 'y') {
    options.xaxes[0].zoomRange = false;
    options.yaxes[0].zoomRange = null;
}
else {
    options.yaxes[0].zoomRange = false;
    options.xaxes[0].zoomRange = null;
}

See the updated fiddle for the full example.