Kendo chart incorrect grouping, ASP.NET MVC

Question

Im trying to configure kendo chart to display data of my model:

public class CallByCountry
{
    public DateTime Date { get; set; }      
    public int Month { get; set; }      
    public int Year { get; set; }
    public DateTime Period { get { return new DateTime(Year, Month, 1); } }       
    public string Country { get; set; }       
    public int CallsCount { get; set; }
}

Sample data:

Month   Year   Country   CallsCount
7       2015   USA          5
8       2015   USA          3
8       2015   UK           9
...

My chart:

     @(Html.Kendo().Chart<CallByCountry>()
            .Name("CallByCountry")
            .ChartArea(chartArea => chartArea
                .Background("transparent")
            )                
            .DataSource(dataSource => dataSource
                .Read(read => read.Action("CallsByCountry", "Reports"))
                .Group(group => { group.Add(model => model.Country); })
                .Sort(sort => sort.Add(model => new { model.Period}).Ascending())
            )
            .Series(series =>
            {
                series.Line(model => model.CallsCount)
                    .Name("#= group.value #").Style(ChartLineStyle.Smooth);
            })
            .Legend(legend => legend
                .Position(ChartLegendPosition.Bottom)
            )
            .ValueAxis(axis => axis.Numeric().Labels(l => l.Format("{0:n0}")).MajorUnit(1))
            .CategoryAxis(axis => axis
                .Categories(model => model.Period)
                 .Date().BaseUnit(ChartAxisBaseUnit.Months)
                 .Labels(lbl => lbl.Format("{0:MM/yyyy}"))
            )
                    .Tooltip(tooltip => tooltip
                        .Visible(true)
                                .Template("#= series.name #: #= value #"))
        )

Controller:

public ActionResult CallsByCountry()
{ 
     List<CallByCountry> callsByCountry = new List<CallByCountry>();
        foreach (var call in _callsRepo.GetAll().ToList())
        {
            var callByCountry = new CallByCountry();
            callByCountry.Date = call.StartDate.Date;
            callByCountry.Country = _contactRepo.Find(call.ContactID).Country;
            callsByCountry.Add(callByCountry);
        }

        IEnumerable<CallByCountry> data = callsByCountry.GroupBy(i => new { i.Date.Month, i.Date.Year, i.Country })
                                   .Select(group => new CallByCountry()
                                   {
                                       Country = group.Key.Country,
                                       Month = group.Key.Month,
                                       Year = group.Key.Year,
                                       CallsCount = group.Count()
                                   }).OrderBy(x => x.Period);

        return Json(data, JsonRequestBehavior.AllowGet);
}

However, I get incorrect representation of my data. The category X-axis shows only one month "7/2015", and some of data for August is displayed in July category. I guess that can be json parsing issue, which occurs with dates, but im using only month and year. Please advise, what am I doing wrong? I'd appreciate any help!

Matt Millican Matt Millican · Accepted Answer · 2015-09-09T17:53:33

I've adjusted a few things. I would recommend instead of doing the Period property on your model, do something like this (creating a DateTime rather than a string):

public DateTime Date { get { return new DateTime(Year, Month, 1); } }

This will allow you to leverage the .Date() builder on the CategoryAxis of the grid, like so:

.CategoryAxis(axis => axis
          .Categories(model => model.Date)
          .Date().BaseUnit(ChartAxisBaseUnit.Months)
          .Labels(lbl => lbl.Format("{0:MM/yyyy}"))
)

There also seems to be an issue with the sorting of the data. I adjusted your .Sort() to be

.Sort(sort => sort.Add(model => new {model.Date}).Ascending())

but I noticed the data still was not appearing properly. In your CallsByCountry() action method, sort the data before you return it.

A full example: https://github.com/mmillican/KendoMvcExamples/commit/9ebaa7c4b5c2ddd2a65890cf3d5d77a484d8a3aa

Kendo chart incorrect grouping, ASP.NET MVC

1 Answers