)
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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to display axis labels in server time zone ?

Platform: ASP.NET MVC |
Control: Chart |
Published Date: April 27, 2017 |
Last Revised Date: July 1, 2019

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

 

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon