CODEWITHSUNDEEP
javascriptjqueryjsonhighcharts
norixxx
norixxx

Reputation: 3169

Highcharts load pointStart from JSON. Milliseconds to UTC time?

I made a graph with Highcharts which series is loaded from JSON.

I am bit new to handle JSON file though...

I want Highcharts to show date (in formart: YYYY/MM/DD ie.2013/04/01) on label of xAxis.

As far as I know, since I cannot write something like this in JSON,

"pointStart": [Date.UTC(2013, 4, 1)]

I wrote milliseconds instead.

My JSON: 

[
    {
    "yAxis": 0,
    "type": "column",
    "name": "Y label",
    "data": [0,0,153,179,122,126,120,101,110,95,142,88,82,92,115,101,141,162,0,0,0,0,0,7,6,0,10,0,9,4,56,86,66,61,87,72,74,60,83,74,50,73,61,56,90,78],
    "pointStart": 1364774400000,
    "pointInterval": 86400000
},{
    "yAxis": 1,
    "type": "line",
    "name": "Y label 2",
    "color": "#AA4643",
    "data": [4980,4572,5554,6147,5268,5221,5263,5084,4906,5000,5198,4777,4790,4549,4158,4294,4891,4689,4432,3925,3708,3723,3623,3831,3787,4353,4809,5046,4989,4815,4315,4556,4502,4725,4537,4540,4654,4367,4589,4874,4837,5032,5046,4633,4561,4576],
    "pointStart": 1364774400000,
    "pointInterval": 86400000
    }
]

And my javascript:

var options = {
chart: {
    renderTo: 'container'
},
title: {
    text: ''
},
xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
        day: '%Y/%m/%d'
    },
    labels: {
        rotation: -45,
        align: 'right',
        formatter: function() {
            return Highcharts.dateFormat('%Y/%m/%d', this.x); //this returns invalid date.
        }
    },
    title: {
        text: ''
    }
},

...

$.getJSON('test.json', function(data) {
        options.series = data;
        chart = new Highcharts.Chart(options);
});

This results invalid date on xAxis label.

But if I remove this part

formatter: function() {
    return Highcharts.dateFormat('%Y/%m/%d', this.x);
}

returns no error but results like 1. Apr which I do not desire to show :(

Any solution to this?

Thank you.

Upvotes: 0

Views: 2355

Answers (3)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You can use http://api.highcharts.com/highcharts#xAxis.labels.formatter and Highcharts.dateFormat() http://api.highcharts.com/highcharts#Highcharts.dateFormat()

 labels: {
            formatter: function() {
                return Highcharts.dateFormat('%Y/%m/%d',this.value);
            }

Upvotes: 1

norixxx
norixxx

Reputation: 3169

I came up with solution as follows:

dateTimeLabelFormats: {
    day: '%Y/%m/%d'
},
labels: {
    rotation: -45,
    align: 'right',
    formatter: function() {
        var _date = new Date(this.value),
            _y = _date.getFullYear();
            _m = _date.getMonth() + 1,
            _d = _date.getDate(),
            _result = _y + '/' + (_m < 10 ? "0"+_m : _m) + '/' + (_d < 10 ? "0"+_d : _d);
        return _result;
    }
},
...

put milliseconds value to Date object in which I was able to handle value w/ such methods as getFullYear(), getDate().

Thanks.

Upvotes: 2

Reality Extractor
Reality Extractor

Reputation: 1277

You have the date/time format wrong. It's not day: '%Y/%m/%d', it needs to be day: '%Y/%y/%e' see dateTimeLabelFormats Highcharts API reference.

Upvotes: 1

Related Questions