CODEWITHSUNDEEP
flot
Mark Brittingham
Mark Brittingham

Reputation: 28865

How do I tell FLOT to NOT use 0 as the default minimum for the Y axis in a bar chart?

I am using the FLOT charting library to plot calories consumed over time. I would like the y-axis to use autoscaling (to just show values that are +/- the min and max in the dataset).

However, the chart always uses 0 as the minimum for my bar chart rather than autoscaling the y-axis values. Here is my code:

function DrawCalorieChart(calorieData) {
    plot = $.plot($("#CalorieHistoryChart"), [calorieData],
    {
        series: {
            bars: { show: true, barWidth: 0.8, align: "center" }
        },
        legend: {
            show: false
        },
        xaxis: { tickDecimals: 0, tickSize: 1, mode: "categories", tickLength: 0 },
        yaxis: { autoscaleMargin: 0.025 },
        grid: { labelMargin: 10 }
    });
}

I can manually set a minimum value but the problem is that I don't know what the minimum might be after new data is entered. I have tried removing the yaxis spec altogether, setting an autoscaleMargin (as shown) and setting the min to null. But nothing works - the minimum is either a static value or zero! Any help would be greatly appreciated.

Upvotes: 2

Views: 1639

Answers (2)

Raidri
Raidri

Reputation: 17550

Current answer after the change mentioned in DNS' answer has been implemented:

Set zero: false in the bar options.

From the official documentation:

Area and bar charts normally start from zero, regardless of the data's range. This is because they convey information through size, and starting from a different value would distort their meaning. In cases where the fill is purely for decorative purposes, however, "zero" allows you to override this behavior. It defaults to true for filled lines and bars; setting it to false tells the series to use the same automatic scaling as an un-filled line.

Upvotes: 0

DNS
DNS

Reputation: 38189

Currently there's no way to do this within the library's own API. You'll need to write some JS to iterate over your values and find a min/max manually. This could be done either outside your plot/redraw calls, or in a processRawData hook, which might work better if you're constantly adding values and redrawing.

Addressing this is actually an active project that I expect will be merged into the Github master branch within the next 2-3 weeks. So depending on whether you're able to wait, and willing to use less-stable code, that's another option.

Upvotes: 3

Related Questions