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

Question

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 comes 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 outcome is that the xAxis has entries like: Q1 2007 Q2 2007 Q3 2007 Q4 2007 .. Q4 2012

Answer 1

You can set tickInterval as three months

http://jsfiddle.net/yHmrZ/5/

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

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