Search code examples
flot

How to get the y axis max range in FLOT graph


I want to change the y axis max range based on plotting data. So When I draw the graph, it dynamically assign the y axis range based on maximum plotting data.

Currently, I am not defining any maximum range for Y axis in options to achieve the above. So it do dynamically assign maximum y-axis range, based on data plotting

This is my code for above implementation

       var source = [];
       var options = {
         xaxis: {
          ...
         }
         yaxis: {
         min: 0,
         axisLabel: "Y",
         axisLabelUseCanvas: false,
         axisLabelFontSizePixels: 12,
         axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
         axisLabelPadding: 15
        },
      }

      plotObj = $.plot($("#placeholder"), source, options) ;

It is working fine and allocating y axis max range dynamically. But, I have included "jquery.flot.selection.js" plugin to zoom the selected area. So it zoom to the ranges.yaxis.from to ranges.yaxis.to with below mentioned code

 $("#placeholder").on("plotselected", function(ev, ranges) {
  //clearInterval(protection_timer);

  axes_data = plotObj.getAxes(); //get plotted axis ranges
  axes_data.xaxis.options.min = ranges.xaxis.from ;   
  axes_data.xaxis.options.max = ranges.xaxis.to ;       
  axes_data.yaxis.options.min = ranges.yaxis.from;
  axes_data.yaxis.options.max = ranges.yaxis.to;     

  ...
  plotObj.setData(graphData);
  plotObj.setupGrid();
  plotObj.draw();
});

Now, when user double click on the placeholder area, I need to reset beck the graph. But this time, as y axis max range is undefined, it is not resetting back. How can I get the y axis range, it was displaying in before zooming ? please give some suggestion


Solution

  • Expand your plotselected event with the second line here:

    axes_data = plotObj.getAxes(); //get plotted axis ranges
    axes_data.yaxis.originalMax = axes_data.yaxis.max; // save max value
    axes_data.xaxis.options.min = ranges.xaxis.from;
    

    and in the doubleclick event to reset the graph add the corresponding line:

    axes_data.yaxis.max = axes_data.yaxis.originalMax; // restore max value