How to display axis labels in server time zone ?
Chart displays axis labels in client time zone because browser converts the date from server time zone to local time zone of the client machine (browser). By embedding the server time zone offset to client (difference between server time zone and UTC time zone), we can use Load event of chart to convert date values from client time zone (browser) to server time zone.
The following code snippet converts axis labels to server timezone
[CSHTML]
@(Html.EJ().Chart("container")
//Load event of chart .Load("loadChart")
//. . . )
<script>
//Embed server time zone offset to client //Offset is in milliseconds var serverTimeZoneOffset = @TimeZoneInfo.Local.GetUtcOffset(DateTime.Now).TotalMilliseconds
function loadChart(sender) { var i, j, series, data, x,
//Convert offset from minutes to milliseconds clientTimeZoneOffset = new Date().getTimezoneOffset() * 60 * 1000;
sender.model.primaryXAxis.range.interval = 24; sender.model.primaryXAxis.range.intervalType = "hours";
for(i=0; i<sender.model.series.length; i++) { series = sender.model.series[i]; data = series.points || series.dataSource; x = series.points ? 'x' : series.xName; for(j=0; j<data.length; j++) { data[j][x] = convertToServerTimeZone(data[j][x], serverTimeZoneOffset, clientTimeZoneOffset); } } }
//Function that converts date in client timezone to server timezone function convertToServerTimeZone(date, serverOffset, clientOffset) { //Convert specified date to UTC and then convert it to server time zone return new Date(date.getTime() + serverOffset + clientOffset); }
</script> |
Chart displaying labels in client-time zone (UTC + 5:30 IST)
Chart displaying labels in server time zone (UTC - 5:30 EST)