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