CODEWITHSUNDEEP
jqueryflot
Dhanasekaran
Dhanasekaran

Reputation: 107

JQuery Flot X axis label formatting

I have more no of ticks for x axis labels in the date format. Now i need to format it with Year or Month or Week based on the number of ticks generated dynamically. For example, if i have dates 2011-10-01,2011-10-02,......2015-10-05, then i need to format the x axis label as 2011, 2012, 2013,...2015. As i am making line graph, when i click the circle, it should show the actual values in the tool tip. i.e. 2011-01-10: 200. Now the x axis labels are merged one with another.

I have tried creating ticks with only year been displayed, but in the tooltip its not getting reflected. i.e. empty.

enter image description here

Kindly share thoughts how can i produce it in good manner.

Upvotes: 1

Views: 951

Answers (1)

Raidri
Raidri

Reputation: 17550

You can customize the options for timeformat and minTickSize depending on your data with a function like this:

var diff = data[data.length - 1][0] - data[0][0];
var oneDay = 24 * 60 * 60 * 1000;

if (diff < 31 * oneDay) {
    options.xaxis.minTickSize = [1, 'day'];
    options.xaxis.timeformat = '%Y-%m-%d';
} else if (diff < 24 * 31 * oneDay) {
    options.xaxis.minTickSize = [1, 'month'];
    options.xaxis.timeformat = '%Y-%m';
} else {
    options.xaxis.minTickSize = [1, 'year'];
    options.xaxis.timeformat = '%Y';
}

See this fiddle for a full example.

Upvotes: 1

Related Questions