Flot Navigation Plugin: Programmatically change zoom mode

by apandit

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' 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

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
        }
	});

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);
};