How to show equally spaced axis for datetime for billing cycle related data on highcharts

时间:2015-06-25 18:27:18

标签: datetime highcharts

I want to show billing cycle data using highcharts where x-axis is datetime. Requirement is to show only 5 labels. But billing cycle start and billing cycle end date should always be shown and we have to display remaining days in equal intervals.

So for example

  1. if billing cycle - 24-06-2015 to 23-07-2015 Labels to show: 24/06 01/07 08/07 15/07 23/07

  2. if billing cycle - 15-06-2015 to 14-07-2015 Labels to show: 15/06 22/06 29/06 06/07 14/07

Any help/hint would help me a lot :)

1 个答案:

答案 0 :(得分:0)

Simply use tickPositioner - and write your logic. In short, it would be:

        tickPositioner: function () {
            var ticks = [],
                min = this.min,
                max = this.max,
                range = max - min,
                interval = range / 5;

            while (min < max) {
                ticks.push(min);
                min += interval;
            }
            return ticks;
        }

Demo (for yAxis, but it doesn't matter): http://jsfiddle.net/qkLd44h1/

PS: You may want to edit a bit algorithm above, to round ticks to fall on a specific day (like always 1st of the month etc).