Chart - Utc DateTime values are not converted to local time by the browser

4 posts, 2 answers
  1. Steve
    Steve avatar
    2 posts
    Member since:
    Jun 2013

    Posted 24 Jul 2013 Link to this post

    Hi,

    In my chart, I have the chart axis labels and chart datapoint labels as DateTime objects.  I've been browsing around for a solution to this for quite some time now but I was unable to find a solution to this problem.  My DateTime values from the MVC application are of Kind Utc.  I'd like the kendo UI chart to automatically convert it to the user's browser's timezone.  It currently is showing the chart in UTC.

    I tried this hoping it would work for Chart as well, but the rendering didn't display the updated Date values:
    http://www.kendoui.com/code-library/mvc/grid/using-utc-time-on-both-client-and-server-sides.aspx

    Other users have mentioned that their Chart automatically converted the DateTime but I'm not seeing that behavior:
    http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/grid/kendo-grid-automatically-converting-timezone.aspx
    http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/chart/chart-is-converting-my-dates.aspx

    I am using version '2013.1.514'

    My definition of the chart is: (The bolded properties are DateTime objects of Kind Utc)
    @(Html.Kendo().Chart(Model.DataPoints)
        .Name("chart")
        .Title("Unique User, Page View, and Session Counts")
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
        )
        .ChartArea(chartArea => chartArea
            .Background("transparent")
        )
        .Series(series =>
        {
            series.Line(model => model.UniqueUsers).Name("Unique Users");
            series.Line(model => model.Sessions).Name("Sessions");
            series.Line(model => model.PageViews).Name("Page Views");
        })
        .CategoryAxis(axis => axis
            .Date()
            .BaseUnit(axisBaseUnit)
            .Min(Model.View.Min)
            .Max(Model.View.Max)

            .Categories(model => model.DateTimeBucket)
            .MajorGridLines(lines => lines.Visible(true))
            .Labels(lbls => lbls
                .DateFormats(df => df.Hours(Model.View.AxisDateLabelFormat))
                .DateFormats(df => df.Days(Model.View.AxisDateLabelFormat))
                .DateFormats(df => df.Weeks(Model.View.AxisDateLabelFormat))
                .DateFormats(df => df.Months(Model.View.AxisDateLabelFormat))
                .DateFormats(df => df.Years(Model.View.AxisDateLabelFormat)))
        )
        .ValueAxis(axis => axis
            .Numeric().Labels(labels => labels.Format("{0:N0}"))
            .Line(line => line.Visible(false))
            .AxisCrossingValue(-10)
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0:N0}")
        )
    )


    Thanks,
  2. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 26 Jul 2013 Link to this post

    Hello Steve,

    Basically if you are using initial server binding (passing the collection to the Chart() constructor you cannot intercept with the requestEnd event and shift the dates. 

    This is why you need to use Ajax binding and use the same approach as the one shown in the Grid demo. The only difference is that the response from the server is slightly different.

    To demonstrate all of this I modified the demo project according to your code.

    You can compare your kind of binding and the ajax binding I added with the requestEnd handling function.

    I hope this helps.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Steve
    Steve avatar
    2 posts
    Member since:
    Jun 2013

    Posted 30 Jul 2013 Link to this post

    Hi Petur,

    Thanks for posting that sample and explaining why the intercept wasn't working.  I've updated my project to support the ajax load of the model.

    I still have an issue with my initial server binding still specifying the category axis' Min and Max properties as UTC values.

    Is there a solution to this, similar to what you prescribed for the data points?

    Thanks,
    Steve
  5. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 01 Aug 2013 Link to this post

    Hello Steve,

    When using the Ajax approach:
    Basically these Min and Max options should not be shifted because they are not transferred through Ajax in contrast to the data that is actually used for the Chart. 

    Could you please elaborate on the problem? What is expected behavior and what is actually happening? Modifying the problem with the sample project could also help us understand the case.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready