Flot Navigation Plugin: Programmatically change zoom mode

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.navigate.js"></script>
<div id='plot' style='width:1000px;height:375px;'></div>
<input type='radio' class='zoom' name='zoomDir' value='x' checked='checked'>Zoom in X Direction
<input type='radio' class='zoom' name='zoomDir' value='y'>Zoom in Y Direction

JavaScript

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
    }
});
console.log(plot.getOptions());

$('input.zoom').change(setZoomDirection);

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

    options.zoom.mode = this.value;

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

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