We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

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)

 

Article ID: Published Date: Last Revised Date: Platform: Control:
7682 04/27/2017 04/27/2017 ASP.NET MVC Chart
Did you find this information helpful?
Add Comment
You must log in to leave a comment

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.