CODEWITHSUNDEEP
asp.net-mvckendo-charttelerik-charting
RAK
RAK

Reputation: 283

Kendo bar chart does not show data

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

enter image description here

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}")
        )
)

Upvotes: 0

Views: 1269

Answers (2)

truonglam
truonglam

Reputation: 1

I think you do not parsing data to input Chart I create object by input chart and pass data

My chart

Upvotes: 0

RAK
RAK

Reputation: 283

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)

Upvotes: 0

Related Questions