CODEWITHSUNDEEP
javascriptjqueryflot
user3467349
user3467349

Reputation: 3191

Flot Re-scale Yaxis min/max on X-axis scale

I have one long unixtime, value Array which is used to initiate a flot chart, and some buttons to change the scale, what I can't seem to be able to do is get Y-axis to scale with the change in X-scale.

Here is an example chart: http://jsfiddle.net/U53vz/

var datarows = //Data Array Here
var options =  { series: { lines: { show: true }, points: { show: true } },
        grid: { hoverable: true,clickable: false, },
        xaxis: { mode: "time", min: ((new Date().getTime()) - 30*24*60*60*1000), max: new Date().getTime(), }
    };
function castPlot() {
window.PLOT = $.plot("#placeholder", [{ data: dataRows }], options
);
};

In the official example scaling is automatic and unspecified on the Y-axis: http://www.flotcharts.org/flot/examples/axes-time/index.html

The only alternative I can think of is looping through the dataset and calculating new Y min/max on each button press. Unless I am breaking some very obvious default function.

Upvotes: 1

Views: 8279

Answers (1)

Mark
Mark

Reputation: 108512

When calculating y-scale, flot does not look at only the "viewable" data but the whole dataset. Since the data points are still present, the y min/max respects them. So your options are:

  1. Subset the series data down to the desired range and let flot scale both x and y.
  2. As you suggested, calculate your own min/max on the y axis.

If you plot get any more complicated than it is now (especially if you start setting up click/hover events on it), I would also recommend you switch to redrawing instead of reiniting your plot.

var opts = somePlot.getOptions();
opts.xaxes[0].min = newXMin;
opts.xaxes[0].max = newXMax;
opts.yaxes[0].min = newYMin;
opts.yaxes[0].max = newYMax;
somePlot.setupGrid();
somePlot.draw();

EDITS

Here's one possible solution.

Upvotes: 4

Related Questions