[Charts Date Scale]

[Charts Date Scale]

  

I'm trying to build a line chart with dates in the x-axis.. The problem I'm having is that since I want trimestral dates the values don't match the scaling.. For example, I have a value for march but in the axis appears April.. Is there anyway to make them match? Oh I have the value something like 201612 and I use newdate to convert the value into dates..
Appreciate the help! 

Hi Paulo,

For that you need to configure the XAxis of the chart.

This example here describes how to do it: http://jsfiddle.net/yHmrZ/4/

What you need to put in your application is a JSON Advanced Format for the XAxis, that based on this example should be something like this:

{
    labels: {
        style: {
            fontSize: '9px',
            width: '175px'
        },            
        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);
        }
        return ticks;
    }
}

Tell us if it worked!


Ricardo Ferreira wrote:

Hi Paulo,

For that you need to configure the XAxis of the chart.

This example here describes how to do it: http://jsfiddle.net/yHmrZ/4/

What you need to put in your application is a JSON Advanced Format for the XAxis, that based on this example should be something like this:

{
    labels: {
        style: {
            fontSize: '9px',
            width: '175px'
        },            
        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);
        }
        return ticks;
    }
}

Tell us if it worked!


Yes its something like this but instead of showing Q1 I need it to show the month, and it should start in december..
For example.. Dez 2015, March 2015, Jun 2015..


Hi,

You just have to adjust the "formatter" section in the JSON to return the Month and year.

    formatter: function () {
       var s = "",
       d = new Date(this.value),
       s = Highcharts.dateFormat('%b', this.value) + " " + d.getFullYear();
       return s;
    }

Check this running example:

http://jsfiddle.net/w76qy1kd/