Format DateTime in Model Bound Chart CategoryAxis

4 posts, 1 answers
  1. Allan
    Allan avatar
    18 posts
    Member since:
    Jan 2013

    Posted 07 Feb 2013 Link to this post

    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>
  2. Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 11 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Allan
    Allan avatar
    18 posts
    Member since:
    Jan 2013

    Posted 11 Feb 2013 Link to this post

    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)
            )
    )
  4. Answer
    Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 13 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top