Aleix Aleix - 5 months ago 85
Javascript Question

Flot navigate plugin - restrict zoom to one axis

I am trying to make zoom and pan enabled in my flot charts only in the xaxis, I would like the yaxis to keep being in the same range. I am using the navigate plugin of jQuery Flot library.

I could not find documentation or another solved question about that. So I tried to do it by setting the yaxis zoomRange and panRange to [0, 0], but it is still not working.

The chart and the "zoom in" is working fine, but when I "zoom out" or when I pan in the chart, it gets broken.

Here is what I've got so far: http://jsfiddle.net/alxer/heL6uwgj/

$(function() {

//example data
var data = [{
label: 'Velocity',
color: '#93cc67',
data: [
[1415165113000, 0],
[1415165202000, 13],
[1415165221000, 19],
[1415165239000, 22],
[1415165254000, 23],
[1415165271000, 24]
]
}];

//non data-dependent options
var options = {
canvas: true,
series: {
lines: {
show: true
},
points: {
show: true
}
},
xaxis: {
mode: "time",
timezone: "browser"
},
yaxis: {},
legend: {
type: "canvas",
position: "ne"
},
grid: {
clickable: true,
hoverable: true
},
zoom: {
interactive: true
},
pan: {
interactive: true,
cursor: "move"
}
};

//calculate the min/max and ranges to set the zoom and pan limits
var minx = null;
var maxx = null;
var miny = null;
var maxy = null;
var numvals = 0;
//calculate min, max and max num of values
for (var a in data) {
for (var d in data[a].data) {
if ((minx === null) || (data[a].data[d][0] < minx)) minx = parseFloat(data[a].data[d][0]);
if ((maxx === null) || (data[a].data[d][0] > maxx)) maxx = parseFloat(data[a].data[d][0]);
if ((miny === null) || (data[a].data[d][1] < miny)) miny = parseFloat(data[a].data[d][1]);
if ((maxy === null) || (data[a].data[d][1] > maxy)) maxy = parseFloat(data[a].data[d][1]);
}
if (data[a].data.length > numvals) numvals = data[a].data.length;
}
if (minx === null) minx = 0;
if (maxx === null) maxx = 0;
if (miny === null) miny = 0;
if (maxy === null) maxy = 0;
//calculate ranges
var xrange = maxx - minx;
var yrange = maxy - miny;
//apply small margin
var auxxmargin = xrange * 0.02;
var auxymargin = yrange * 0.02;
options.xaxis.min = minx - auxxmargin;
options.xaxis.max = maxx + auxxmargin;
options.yaxis.min = miny;
options.yaxis.max = maxy + auxymargin;
//xaxis zoom range from 1 value to all values
options.xaxis.zoomRange = [xrange / numvals, xrange + (auxxmargin * 2)];
//xaxis pan range from min value to max value
options.xaxis.panRange = [options.xaxis.min, options.xaxis.max];
//trying to disable the yaxis zoom and pan
options.yaxis.zoomRange = [0, 0];
options.yaxis.panRange = [0, 0];

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

Answer

To disable zooming and panning for one axis, set the options for panRange and zoomRange of that axis to false instead of [0, 0]:

options.yaxis.zoomRange = false;
options.yaxis.panRange = false;

See the updated fiddle.

Comments