CODEWITHSUNDEEP
javascripthighchartstimezone
Codey McCodeface
Codey McCodeface

Reputation: 3028

Timezone on Highcharts

As far as I understand the default for Highcharts is to UTC. I have tried to do as suggested by the answer in this post Highcharts graph X-axis label for different date ranges. If I understand correctly this should set the timezone to be that of the browser.

I've tested this on jsFiddle and toggling the useUTC option seems to have no effect.

http://jsfiddle.net/looneyp/me3ry/

Question: What am I doing wrong above and how do you set the time zone correctly?

Upvotes: 11

Views: 48858

Answers (6)

veritas
veritas

Reputation: 432

Add this code to the document.ready and you should get the highcharts in your local timezone if you're feeding it UTC time 

$(document).ready(function () {

  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) {
              d = new Date();
              timezoneOffset =  d.getTimezoneOffset()

              return timezoneOffset;
          }
      }
  });

});

Upvotes: 1

Allan Houston
Allan Houston

Reputation: 51

Highcharts have moved this option in more recent versions.

One thing to keep in mind is that your shift seems to be the inverse or negative of where your local time from UTC, so if you're in UTC+2 for example, then your timezoneOffset is going to be -2 * 60, which is not entirely intuitive:

Highcharts.setOptions({
    time: {
        timezoneOffset: -2 * 60
   }
});

API documentation: https://api.highcharts.com/highcharts/time.getTimezoneOffset

Here is an example of it: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/time/timezoneoffset/

Upvotes: 4

Joe Sebin
Joe Sebin

Reputation: 450

use timezone by getfunction Example: Using getTimezoneOffset

var x = new Date();
var currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60;

Upvotes: 0

magagnon
magagnon

Reputation: 146

Highcharts now supports timezones in 3.0.8

You can now set the timezoneOffset global property: http://api.highcharts.com/highcharts#global.timezoneOffset

Upvotes: 7

Codey McCodeface
Codey McCodeface

Reputation: 3028

It's one of those days

I'm in the UK so UTC true or false gives the same results since I am in GMT. My discrepancy between my expected displayed time was due to a parsing issue in PHP to unixTime.

Upvotes: 11

Dennis
Dennis

Reputation: 32598

Nothing you are doing seems to be wrong. This jsFiddle shows a shift in the x-axis when UTC is disabled in the global Highcharts options.

Upvotes: 6

Related Questions