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

[Steve]

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,

[Petur Subev]

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

[Steve]

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

[Petur Subev]

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