Need help in plotting a chart using highcharts in angularjs

Question

I have some data which is coming from elasticsearch which has task\'s start & end time for a particular agent\'s

Answer 1

I'm a little confused with your requirements (still).

Highcharts, requires timestamps (in ms) to render. So you need to preprocess your dates, for example: new Date("2014-11-20T11:03:55.000-08:00").getTime() to get UTC timestamp. Now, when you have UTC times, you can use moment.js as suggested above to render data in specific timezone.

To use moment.js with Highcharts, you can extend getTimezoneOffset option (experimental), this way:

Highcharts.setOptions({
    global: {
        /**
         * Use moment-timezone.js to return the timezone offset for individual 
         * timestamps, used in the X axis labels and the tooltip header.
         */
        getTimezoneOffset: function (timestamp) {
            var zone = 'Europe/Oslo',
                timezoneOffset = moment.tz.zone(zone).parse(timestamp);

            return timezoneOffset;
        }
    }
});

And live example: http://jsfiddle.net/k96t1dy7/3/

Note: your second plunker doesn't work..

Note2: Above test case is using github version of Highcharts. It's candidate version for Highcharts 4.1.

Answer 2

If I understand correctly, you want to parse your date object, that Highchart can consume? You can use the library moment.js, works like a charm.