javascript - HighCharts Time-based Quarterly Data - xAxis Label Issue - Stack Overflow

We are displaying dynamic data on our site. The user can select different types of time periods such as monthly, quarterly, annual, decennial, etc. Our issue es in trying to show quarterly data cleanly on the xAxis. We can use the formatter to show the tool-tip correctly as "Q1 2008". We want to have the xAxis do something similar. We are partially there but I think I am doing some fat-finger error here. Example is on jsFiddle.

The code that we are trying to work with is in the xAxis label [formatter][2]:

xAxis: {
            alternateGridColor: '#FAFAFA',
            labels: {
                style: {
                    fontSize: '9px',
                    width: '175px'
                },
                formatter: function () {
                    var s;
                    if (Highcharts.dateFormat('%b', this.value) == 'Jan') {
                        s = s + "Q1"
                    };
                    if (Highcharts.dateFormat('%b', this.value) == 'Apr') {
                        s = s + "Q2"
                    };
                    if (Highcharts.dateFormat('%b', this.value) == 'Jul') {
                        s = s + "Q3"
                    };
                    if (Highcharts.dateFormat('%b', this.value) == 'Oct') {
                        s = s + "Q4"
                    };
                    s = s + " " + Highcharts.dateFormat('%Y', this.value);
                    return s;
                }
            },
            tickInterval: 31536000000,
            type: 'datetime'
        }

This is using a datetime type of xAxis and is running under HighCharts. If I change the tickInterval to 3 months (259200000) it goes pear shaped. Our desired oute is that the xAxis has entries like: Q1 2007 Q2 2007 Q3 2007 Q4 2007 .. Q4 2012

We are displaying dynamic data on our site. The user can select different types of time periods such as monthly, quarterly, annual, decennial, etc. Our issue es in trying to show quarterly data cleanly on the xAxis. We can use the formatter to show the tool-tip correctly as "Q1 2008". We want to have the xAxis do something similar. We are partially there but I think I am doing some fat-finger error here. Example is on jsFiddle.

The code that we are trying to work with is in the xAxis label [formatter][2]:

xAxis: {
            alternateGridColor: '#FAFAFA',
            labels: {
                style: {
                    fontSize: '9px',
                    width: '175px'
                },
                formatter: function () {
                    var s;
                    if (Highcharts.dateFormat('%b', this.value) == 'Jan') {
                        s = s + "Q1"
                    };
                    if (Highcharts.dateFormat('%b', this.value) == 'Apr') {
                        s = s + "Q2"
                    };
                    if (Highcharts.dateFormat('%b', this.value) == 'Jul') {
                        s = s + "Q3"
                    };
                    if (Highcharts.dateFormat('%b', this.value) == 'Oct') {
                        s = s + "Q4"
                    };
                    s = s + " " + Highcharts.dateFormat('%Y', this.value);
                    return s;
                }
            },
            tickInterval: 31536000000,
            type: 'datetime'
        }

This is using a datetime type of xAxis and is running under HighCharts. If I change the tickInterval to 3 months (259200000) it goes pear shaped. Our desired oute is that the xAxis has entries like: Q1 2007 Q2 2007 Q3 2007 Q4 2007 .. Q4 2012

• javascript
• highcharts

Share Improve this question Follow asked May 14, 2013 at 13:01 wergeldwergeld 14.5k99 gold badges5757 silver badges8282 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can set tickInterval as three months

http://jsfiddle/yHmrZ/5/

tickInterval: 3 * 30 * 24 * 3600 * 1000,

But when you would like to dynamic change ranges, you should use tickPostitioner

You can use your own tickPositioner always, take a look: http://jsfiddle/yHmrZ/4/

And code for tickPositioner and formatter:

        labels: {
            formatter: function () {
                var s = "",
                    d = new Date(this.value),
                    q = Math.floor((d.getMonth() + 3) / 3); //get quarter
                s = "Q" + q + " " + d.getFullYear();
                return s;
            }
        },
        tickPositioner: function(min, max){
            var axis = this.axis,
                act = min,
                ticks = [];
            while( act < max ){
                ticks.push(act);
                act = act + (90 * 24 * 3600 * 1000); //three months
            }
            return ticks;
        },