Kendo bar chart does not show data

Question

Struggling to display the data from the Model into the Kendo Bar chart. I want bar chart to display the results as shown in the following figure

The controller returns valid data but chart fails to display the data properly.

Model is

public class FeeCollectionViewModel
 {
     [Key]
     public int FeeCollectionID { get; set; }
     public int StudentID { get; set; }
     public int FeeModeID { get; set; }
     public int FeeTypeID { get; set; }
     public string FeeTypeName { get; set; }
     public double Amount { get; set; }
     public DateTime CollectionDate { get; set; }
  }

Here is the View

@using Kendo.Mvc.UI
@using Kendo.Mvc.Extensions
@{
    ViewBag.Title = "Fee Statistics";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Fee Statistics</h2>

 @(Html.Kendo().Chart<SMS.ViewModels.FeeCollectionViewModel>()
        .Name("chart")
        .Title("Today's Collection")
        .Legend(legend => legend
        .Position(ChartLegendPosition.Top)
        )
        .DataSource(ds => ds
            .Read(read => read.Action("TodaysCollection_Read", "FeeCollections"))
            .Group(group => group.Add(model => model.FeeTypeName))
        )
        .Series(series =>
        {
            series.Column(model => model.Amount).Name("Amount Collected");
        })
        .CategoryAxis(axis => axis
            .Categories(model => model.FeeTypeName)
            .Labels(labels => labels.Rotation(-90))
            .MajorGridLines(lines => lines.Visible(false))
        )
        .ValueAxis(axis => axis.Numeric()
            .Labels(labels => labels.Format("{0:N0}"))
            .MajorUnit(10000)
            .Line(line => line.Visible(false))
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0:N0}")
        )
)

Does it work if you add .AutoBind(true) ? Also check for any related javascript errors in the console and if any other controls have the ID chart in the view or layout. — zgood

RAK RAK · Accepted Answer · 2017-05-09T11:42:18

Kendo Chart does not perform groupby sum. I had to do it in the controller and pass the resulting model to the chart.

    List<FeeCollectionChartViewModel> result = (from f in feeCollections
                                                group f by f.FeeTypeName into g
                                                select new FeeCollectionChartViewModel()
                                                        {
                                                            FeeTypeName = g.Key,
                                                            Amount = g.Sum(x => x.Amount)
                                                        }).ToList();
     return Json(result)

Kendo bar chart does not show data

2 Answers