This is a migrated thread and some comments may be shown as answers.

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

3 Answers 104 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 24 Jul 2013, 09:22 PM
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,

3 Answers, 1 is accepted

Sort by
0
Accepted
Petur Subev
Telerik team
answered on 26 Jul 2013, 01:28 PM
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!
0
Steve
Top achievements
Rank 1
answered on 31 Jul 2013, 01:41 AM
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
0
Accepted
Petur Subev
Telerik team
answered on 01 Aug 2013, 01:22 PM
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!
Tags
Chart
Asked by
Steve
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Steve
Top achievements
Rank 1
Share this question
or