How to format json data in miliseconds to Date format in highcharts?

Question

I get array of date from json as 1420185600000,1420531200000,1420617600000,1420704000000,1420790400000,1420876800000. How do I format it to show the correct date in the XAxis l

Answer 1

You need to tell highcharts that the xAxis is a date type.

xAxis: {
    type: 'datetime'
},

You may need extra formatting if you want the date displayed in some form other than the default. That can be done via the labels.formatter.

Sample code that lets you do what you want (minus what formatting you want your date in):

xAxis: {
    categories: [1420185600000,1420531200000,1420617600000,1420704000000,1420790400000,1420876800000],
    labels: {
        formatter: function () {
            return new Date(this.value);
        }
    }
},

You would then need to determine what parts of your new date string you actually want to show. The sample above doing return Date(this.value) is the kitchen sink approach.

UPDATE: If you want the strings formatted, Highcharts gives you functions to set up the date string. See this fiddle (same as fiddle linked in the comments below with formatter using highcharts): http://jsfiddle.net/CaptainBli/psd3ngsh/13/

        xAxis: {
            type: "datetime",
        categories: xArray,
        labels: {
            formatter: function () {
                return Highcharts.time.dateFormat('%Y-%m-%d %H:%M:%S.%L', new Date(this.value));
            }
        }
    },

Answer 2

arrayOfDatesFromJson = arrayOfDatesFromJson.map(function (element) {
  return new Date(element);
});