489
Views
3
Comments
Solved
[Charts Date Scale]
Question

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! 

2024-02-06 16-27-52
Ricardo Ferreira
Staff
Solution

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:

https://jsfiddle.net/w76qy1kd/ 

2024-02-06 16-27-52
Ricardo Ferreira
Staff

Hi Paulo,

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

This example here describes how to do it: https://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!


UserImage.jpg
Paulo Pereira

Ricardo Ferreira wrote:

Hi Paulo,

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

This example here describes how to do it: https://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..


2024-02-06 16-27-52
Ricardo Ferreira
Staff
Solution

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:

https://jsfiddle.net/w76qy1kd/ 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.