Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Support] Set Timezone to UTC on Graph #4334

Closed
srose4 opened this issue Jun 6, 2017 · 12 comments
Closed

[Support] Set Timezone to UTC on Graph #4334

srose4 opened this issue Jun 6, 2017 · 12 comments

Comments

@srose4
Copy link

srose4 commented Jun 6, 2017

Hi, I am trying to display the date on the x-axis to UTC, so everyone's graph has the same date. I followed the suggestions at https://stackoverflow.com/questions/40891462/chart-js-display-control-timescale-time-zone but I cannot get this to work. Here is my simple project https://jsfiddle.net/quantonos/znqfu2bp/ People should see 3am as the start time. I see 10pm EST since I'm in EST. Thanks

@etimberg
Copy link
Member

etimberg commented Jun 6, 2017

@srose4 I think your best way to support this is to convert the data to UTC before passing to the chart. Otherwise, we'd need to conditional all of the moment() calls as possibly also moment.utc()

@srose4
Copy link
Author

srose4 commented Jun 7, 2017

@etimberg Whether I use moment() or moment.utc(), the date is stilled displayed with local browser time zone conversion. If you inspect the first date object, time is 3am(gmt). However it is displayed on my graph as EST and in PST in Cali. What I want is, No matter where the user is located, the graph should always display 3am for the first point on the x-axis. I'm trying to understand if this is a bug in my code, a bug in chart.js, or an item not well documented?

@etimberg
Copy link
Member

etimberg commented Jun 7, 2017

Hmmm, ok I will do some investigation and see what I can find

@marekr
Copy link

marekr commented Jun 14, 2017

Yea this was sort of a problem for me as well. From poking about, it seems to be because the moment objects are converted to integer timestamps and passed to the Chart.Ticks.generators.time instead of preserving them. So inside the generator, moment( ) is called on the timestamp causing it to convert to local time.

The solution for anyone that doesn't care its global can just use the moment-timezone extension that allows setting the global default for moment( ) usage. i.e.

moment.tz.setDefault("UTC");

@thomasbee
Copy link

thomasbee commented Aug 16, 2017

Well, I do care that the proposed fix is global and I need to include another lib and would appreciate if this is fixed in chart.js. This is rather fundamental.

@kddrake
Copy link

kddrake commented Sep 28, 2017

+1

@toxaq
Copy link

toxaq commented Sep 30, 2017

Using moment.utc gets me the correct time on the tooltip but the x-axis labels are still wrong.

xAxes: [ {type: 'time',time: { tooltipFormat: 'LT'}, ticks:{callback: function(value, index, values) {
          if (!values[index]) {return}
          return moment.utc(values[index]['value']).format('LT');
      }}}]

This gave me the format I want. No idea why the ticks formatting is independent of the tooltip formatting but this is a work around (ie recasting the original value back into a moment.utc and manually applying a format).

@benmccann
Copy link
Contributor

benmccann commented Jan 25, 2018

I've created issue #5186 to consolidate the various pieces of feedback we've received regarding time zone support. I'm going to close this issue in favor of that one. Please feel free to subscribe to it for update

@tobyweston
Copy link

@marekr is there anything more to just importing moment-timezone and calling

moment.tz.setDefault("America/New_York"); // in my case

I've experimented and the chart seems to ignore it. I was expecting the time series to update with the +5 hours (from NY). ❓

@benmccann
Copy link
Contributor

There's quite a bit more to it. Chart.js needs substantial updates. I'm working on it, but trying to do it without including moment-timezone to reduce download size. I have a couple different ideas. One is to add timezone support to date-fns and switch to that. I have a PR open with date-fns for that

@HAXRD
Copy link

HAXRD commented May 3, 2018

I found a solution to this problem, but we need to revise a line of code in chart.js manually.
Go to .\node_modules\charts.js\src\scales\scales.time.js and find the function called convertTicksToLabels. The reason why the chart.js displays charts according to your local machine time is this function converts labels into moment objects.
So all we need to do is just add an offset to the moment object whenever the function tries to convert labels into moment objects.

Here is an example:
var givenTime = moment();
// it will display your local machine time. e.g. Thu May 03 2018 22:53:26 GMT+0800
var convertedTime = moment(givenTime.utc()).utcOffset(-180);
// e.g Thu May 03 2018 11:53:26 GMT-0300

More explicitly speaking, find the convertTicksToLabels function and do the following changes:
from (.\node_modules\charts.js\src\scales\scales.time.js line 677, this may vary depends on the version of chart.js)
labels.push(this.tickFormatFunction(moment(ticks[i].value), i, ticks));
to
labels.push(this.tickFormatFunction(moment(moment(ticks[i].value).utc()).utcOffset(-180), i, ticks));

@Nakilon
Copy link

Nakilon commented May 16, 2021

moment.tz.setDefault("UTC");

Where do I put it? I get Uncaught ReferenceError: moment is not defined.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

10 participants