How to stop zooming out in Flot bar chart?

Question

I am using Flot to draw some bar charts. How do I configure the zoom so that when a user zooms out, the chart will look like the one at the top and not like the one at the bottom? In other words, I don't want the user to continue zooming out when all of the data for the chart is shown. I also want to restrict the chart from displaying anything below 0 on the X axis. See my code and pictures of the charts below:

<#macro barChart2 var formatFunction ticks="" optionLegend="{ show: false }">
  var options = {
    yaxis: {
      tickFormatter: ${formatFunction}
    },
    series: {
      stack: 0,
      bars: { 
        show: true,
        barWidth: 0.9,
        align: "center"
      }
    },
    grid : { 
      hoverable: true 
    },
    xaxis: {
      <#if "${ticks}" != "">
        ticks: ${ticks}
      </#if>
      mode: "time",
      timeformat: "%b %d, %H:%M %P"
    },
    pan : { 
      interactive: true 
    },
    legend: ${optionLegend}
  };

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

  $("#zoomIn${var}").click(function(e) {
    e.preventDefault();
    plot${var}.zoom();
  });

  $("#zoomOut${var}").click(function(e) {
    e.preventDefault();
    plot${var}.zoomOut();
  });
</#macro>

Answer 1

I suggest you take a look at the zoomRange and panRange parameters that you can set with the navigation plugin. You specify those for the axes like:

xaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
yaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] }

where zoomRange sets the limit for zooming. In this case, the difference between the min and max will never go below 0.1, and it will never exceed 10. panRange tells the content to stay in a certain range, so in this case, neither axis will pan below -10 or above 10.

I'm not sure how you do this with time series data, but try with javascript timestamps to begin with.