Changing the epoch to respective timezone in Highcharts and showing the time on x-axis

Question

I have some epoch timestamps in milliseconds that i am passing to the x-axis in highcharts. Now i have a select button which has some predefined timezones mentioned in it. For ex: us-east, UK, Taiwan, Singapore etc. So what i want is when a user selects a particular timezone, the timestamps on the graph should show the local time of that selected timezone.

For that i have written this sample code.

Highcharts.setOptions({      // This is for all plots, change Date axis to local time-zone
    global : {
    {{#if_eq tz "IST"}}
        useUTC : false
    {{/if_eq}}
    {{#if_eq tz "us-east"}}
        timezoneOffset: -5 * 60 
    {{/if_eq}}
    {{#if_eq tz "us-west"}}
        timezoneOffset: -7 * 60
    {{/if_eq}}
    {{#if_eq tz "uk"}}
        timezoneOffset: 1 * 60 
    {{/if_eq}}
    {{#if_eq tz "tw"}}
        timezoneOffset: 8 * 60  
    {{/if_eq}}
    {{#if_eq tz "sg"}}
        timezoneOffset: 8 * 60  
    {{/if_eq}}
    }
});

This code works if you select IST. The timestamps get converted to my local time. But the time that i am getting when i select some other time zone on the chart is wrong. I don't know if i should convert the timezoneOffset in seconds and pass it or milliseconds or if i am doing it wrong.

Any help would be appreciated.

PS:- I am using Handlebars for data passing, so don't get confused. Thanks

Answer 1

A few things:

• You should use standardized IANA time zone identifiers to identify each time zone. For example, use America/New_York, not us-east.

• Don't attempt to determine the time zone offset for each zone manually, or you may easily have errors.

• Time zone offsets change over time. This is due to both changes in standard time, and daylight saving time.

• The better way to do this in HighCharts is to hook the getTimezoneOffset function. This is a simple function that when passed the timestamp, returns the appropriate time zone offset. You'll need to implement the function such that it returns the appropriate offset for the selected time zone at the correct time.

• The easiest way to do this is to integrate moment-timezone. There is an example of this here, which can also be found in the HighCharts documentation.