Articles in this section
Category / Section

How to display axis labels in server time zone ?

1 min read

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)

Displaying labels in client-time zone

 

Chart displaying labels in server time zone (UTC - 5:30 EST)

Displaying labels in server time zone

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied