Search code examples
flot

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.


Solution

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