jQuery flot - fit time-axis tick labels without text overflowing for variable range chart

Question

I have a simple flot line chart with daily data samples. But the range is user selectable (anything from 2 days up to several years of data).

var chartConfig = {
    xaxis: {
        mode: "time",
        timeformat: "%Y/%m/%d"
    }
};

$.plot($("#chart"), readings, chartConfig);

I want the x-axis ticks to display dates (e.g. 2013/07/15), but for only a suitable number of ticks, evenly distributed across the range, to be shown so that the label text doesn't overflow (e.g. 10 ticks).

I've looked at tickSize and minTickSize but these are only 'guidelines' - above 4 ticks they have no impact in this use case.

mtmacdonald mtmacdonald · Accepted Answer · 2013-07-15T12:45:05

In the end I've written something myself to show a fixed number of ticks, regardless of data range.

It calculates the interval of which samples to show a tick for, and then uses the modulo operator to test whether to show the sample tick or not.

var ticks = [];
var tick_count = 7; //number of ticks to show
var sample_count = readings[0].data.length;
var display_interval = Math.round((sample_count/tick_count));
for (var i = 0; i < sample_count; i++) {
    if((i % display_interval) == 0) {
       ticks.push(readings[0].data[i][0]);
    }
}
chartConfig.xaxis.ticks = ticks;
$.plot($("#chart"), readings, chartConfig);

This assumes all the samples are of the same duration.

jQuery flot - fit time-axis tick labels without text overflowing for variable range chart

1 Answers