Format DateTime in Model Bound Chart CategoryAxis

[Allan]

I was wondering if maybe someone could help me get the syntax correct to format the DateTime values on my CategoryAxis? Currently, the closest I have gotten throws an InvaidCastException, but my value is definately a datetime datatype. Any help will be appreciated, my code is below:

HomeController.cs:

using MobileChart_WithDataBind.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace MobileChart_WithDataBind.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            var myHist = new List<ChartHist>

            {

                new ChartHist() { LoginDateTime = Convert.ToDateTime("2/6/2013 12:00:00"), LoginDuration_Fail = 3, LoginDuration_Pass=2 },

                new ChartHist() { LoginDateTime = Convert.ToDateTime("2/5/2013 12:00:00"), LoginDuration_Fail = 4, LoginDuration_Pass=2 },

                new ChartHist() { LoginDateTime = Convert.ToDateTime("2/4/2013 12:00:00"), LoginDuration_Fail = 3, LoginDuration_Pass=2 },

                new ChartHist() { LoginDateTime = Convert.ToDateTime("2/3/2013 12:00:00"), LoginDuration_Fail = 3, LoginDuration_Pass=2 }

            };

 

            return View(myHist);

        }

 

        public ActionResult About()

        {

            ViewBag.Message = "Your app description page.";

 

            return View();

        }

 

        public ActionResult Contact()

        {

            ViewBag.Message = "Your contact page.";

 

            return View();

        }

    }

}

Index.cshtml:

@model IEnumerable<MobileChart_WithDataBind.Models.ChartHist>

 

@{

    ViewBag.Title = "Home Page";

}

@(Html.Kendo().Chart(Model)

            .Name("chart")

            .Title("Chart Title")

            .SeriesDefaults(seriesDefaults => seriesDefaults.Column().Stack(false)

            )

            .Series(series =>

            {

                series.Column(model => model.LoginDuration_Pass).Name("Passed").Color("Lime");

                series.Column(model => model.LoginDuration_Fail).Name("Failed").Color("Red");

            })

            .CategoryAxis(axis => axis

                .Categories(model => model.LoginDateTime)

                .Title("Time of Attempt")

                .Date()

                .Labels(labels => labels

                    .DateFormats(formats => formats.Hours("HH:mm"))

                    )

            )

            .ValueAxis(axis => axis

                .Numeric().Labels(labels => labels.Format("{0:0.00}"))

                .Title("Seconds")

            )

            .Tooltip(tooltip => tooltip

                .Visible(true)

                .Format("{0} Seconds")

            )

            )

<h2>@ViewBag.Message</h2>

<p>

    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc<;/a>.

</p>

 

<ul data-role="listview" data-inset="true">

    <li data-role="list-divider">Navigation</li>

    <li>@Html.ActionLink("About", "About", "Home")</li>

    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>

</ul>

[Daniel]

Hello Allan,

The Date method replaces the builder used for the categories so it should be used first in this cases. Please try with the following configuration:

.CategoryAxis(axis => axis
    .Date()
    .Categories(model => model.LoginDateTime)
    .Title("Time of Attempt")
    .Labels(labels => labels
        .DateFormats(formats => formats.Hours("HH:mm"))
        )
)

Regards,
Daniel
the Telerik team

[Allan]

My datetime values all look the same with your new code.

There are no errors though.

How do I change the format to not include all the zeros for minutes and seconds?

This is what I have: 2/4/2013 10:00:00 PM
This is what I would like: 2/4/2013 10PM

Here is my code:

.CategoryAxis(axis => axis

    .Date()

    .Categories(model => model.LoginDateTime)

    .Title("Time of Attempt")

    .Labels(model => model

        .DateFormats(formats => formats.Hours("HH:mm"))

        .Rotation(-65)

        )

)

[Daniel]

Hello again Allan,

The formats applied in this case will be for days so you should use the Days method instead. In order to show only the hours, you can use the format in the snippet below:

.CategoryAxis(axis => axis
    .Date()
    .Categories(model => model.LoginDateTime)
    .Title("Time of Attempt")
    .Labels(labels => labels.DateFormats(formats => formats.Days("dd/MM/yyyy hh tt")))
)

Regards,
Daniel
the Telerik team