You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2021/03/11 07:58:41 UTC
[GitHub] [echarts] throrin19 opened a new issue #14453: Possibility to set specific timezone for time axis
throrin19 opened a new issue #14453:
URL: https://github.com/apache/echarts/issues/14453
### What problem does this feature solve?
In our case, we have many clients arround the world. We want have the ability to show their data using their timezone. Actually, Echarts use GMT dates to set xAxis intervals labels and current browser timezone for date format.
We correctly set the correct timezone in formatter but, for intervals, we have already the problem of GMT.
It's a really important feature for us.
### What does the proposed API look like?
An option, in xAxis to set timezone should be great to fix the problem :
```
xAxis : {
type : 'time',
timezone : 'Europe/Paris', // with that, all xAxis times are manipulated using this timestamp
}
```
<!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
<!-- This issue is in English. DO NOT REMOVE -->
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] throrin19 commented on issue #14453: Possibility to set specific timezone for time axis
Posted by GitBox <gi...@apache.org>.
throrin19 commented on issue #14453:
URL: https://github.com/apache/echarts/issues/14453#issuecomment-796557165
In our case, we set the formatter as function to convert date to specific timezone and, in the showed labels, we see that when the interval is one day or more, the corresponding day is based on UTC dates.
In the following example, here is a 4-day display with dates displayed in GMT+1 :
Normally, and if I understand the logic of Echarts correctly, in this case the interval should make dates every 12 hours, i.e. 00:00 and 12:00 for each label. But here, we can see that it is the case, but on the UTC date
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] throrin19 edited a comment on issue #14453: Possibility to set specific timezone for time axis
Posted by GitBox <gi...@apache.org>.
throrin19 edited a comment on issue #14453:
URL: https://github.com/apache/echarts/issues/14453#issuecomment-800163920
I found how to resolve this with `date-fns-tz` :
I force the dateTime in UTC but converted in specific timezone using function `utcToZonedTime`. And with that, all showed dates are correctly showed in specific timezone without any problems :
```js
import { utcToZonedTime, format } from 'date-fns-tz';
const timezone = 'America/Boise';
const time = [
1615868012847,
1615889612847,
];
const data = [
// data array with [time, value] items
];
const options = {
xAxis : {
type : 'time',
min : utcToZonedTime(time[0], timezone),
max : utcToZonedTime(time[1], timezone),
},
tooltip : {
trigger : 'axis',
confine : true,
axisPointer : {
animation : false,
label : {
formatter({ value }) {
// used to already show datetime completelly
return format(value, 'yyyy-MM-dd HH:mm:ss', { timeZone : timezone });
},
},
},
},
series : [{
type : 'line',
name : 'test',
data : data.map(item => [utcToZonedTime(item[0], timezone) ,item[1]]),
}],
};
```
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] throrin19 commented on issue #14453: Possibility to set specific timezone for time axis
Posted by GitBox <gi...@apache.org>.
throrin19 commented on issue #14453:
URL: https://github.com/apache/echarts/issues/14453#issuecomment-800163920
I found how to resolve this with `date-fns-tz` :
I force the dateTime in UTC but converted in specific timezone using function `utcToZonedTime`. And with that, all showed dates are correctly showed in specific timezone without any problems :
```js
import { utcToZonedTime, format } from 'date-fns-tz';
const timezone = 'America/Boise';
const time = [
1615868012847,
1615889612847,
];
const data = [
// data array with [time, value] items
];
const options = {
xAxis : {
type : 'time',
min : utcToZonedTime(time[0], timezone),
max : utcToZonedTime(time[1], timezone),
},
tooltip : {
trigger : 'axis',
confine : true,
axisPointer : {
animation : false,
label : {
formatter({ value }) {
// used to already show datetime completelly
return format(value, 'yyyy-MM-dd HH:mm:ss', { timeZone : timezone });
},
},
},
},
series : [{
type : 'line',
name : 'test',
// used to convert to specific timezone but in UTC timezone
data : data.map(item => [utcToZonedTime(item[0], timezone) ,item[1]]),
}],
};
```
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] ptulou commented on issue #14453: Possibility to set specific timezone for time axis
Posted by GitBox <gi...@apache.org>.
ptulou commented on issue #14453:
URL: https://github.com/apache/echarts/issues/14453#issuecomment-944623601
We are also looking for something like this. We allow users to set the time zone they want to see and that time zone may be different from the browser's time. We're passing in ISO strings for the times and it seems whether I pass in UTC, or specific time zones echarts always (correctly) converts them to the browser's time zone. We tried to work around this by leaving off the time zone information which mostly works except it does not handle the transition to/from DST as one might expect.
What we would like would be a way to set a time zone for the whole chart, or perhaps per series. All times passed into the data would be displayed and calculated in that time zone rather than the browser's time zone.
Our fallback solution in the interim is to continue to pass in UTC times and override every tooltip and axis formatter to convert to the time zone the user specified to make it appear like the data is in the right time zone. The only draw back to this approach that I've found is that the axis ticks that are chosen are not nice round times like there would normally be (i.e. it chooses to put a tick at what appears to be 3 am instead of midnight).
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] NotAndD commented on issue #14453: Possibility to set specific timezone for time axis
Posted by GitBox <gi...@apache.org>.
NotAndD commented on issue #14453:
URL: https://github.com/apache/echarts/issues/14453#issuecomment-979783462
We would be interested into this functionality as well, being able to specify a timezone and have everything rendered as if we were in that timezone (instead of the current browser timezone) would be great.
Right now, similarly to the hack that was suggested, we do the same thing but with `moment.tz`.
```
/**
* Will hard-shift a timestamp so that, if rendered in current timezone, it will look as it is instead
* into the desired timezone.
*/
export function utcToZonedTime(utcTime: number, timezone: string) {
const ourTimezone = moment.tz.guess();
const ourOffsetInMillis = moment.utc(utcTime).tz(ourTimezone).utcOffset() * 60000;
const givenTimezoneOffsetInMillis = moment.utc(utcTime).tz(timezone).utcOffset() * 60000;
return utcTime + givenTimezoneOffsetInMillis - ourOffsetInMillis;
}
/**
* Will revert what utcToZonedTime had done.
*/
export function zonedTimeToUtc(zonedTime: number, timezone: string) {
const ourTimezone = moment.tz.guess();
const ourOffsetInMillis = moment.utc(zonedTime).tz(ourTimezone).utcOffset() * 60000;
const givenTimezoneOffsetInMillis = moment.utc(zonedTime).tz(timezone).utcOffset() * 60000;
return zonedTime - givenTimezoneOffsetInMillis + ourOffsetInMillis;
}
```
It kinda works.. but it would be way better if ECharts could do this on its own so that dates do not need to be modified.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] echarts-bot[bot] commented on issue #14453: Possibility to set specific timezone for time axis
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #14453:
URL: https://github.com/apache/echarts/issues/14453#issuecomment-796544848
Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.
In the meanwhile, please make sure that **you have posted enough image to demo your request**. You may also check out the [API](http://echarts.apache.org/api.html) and [chart option](http://echarts.apache.org/option.html) to get the answer.
If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.
If you are interested in the project, you may also subscribe our [mailing list](https://echarts.apache.org/en/maillist.html).
Have a nice day! 🍵
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org