Flot navigate plugin - restrict zoom to one axis

Question

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 1

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.