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, May 08 '17 at 15:56

score 0 · Answer 1 · answered May 09 '17 at 11:42

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)

score 0 · Answer 2 · answered Jun 17 '20 at 02:16

0

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

My chart

answered Jun 17 '20 at 02:16

truonglam

1
1

Welcome to stack overflow. Posting link-only answers are usually frowned upon because the link could disappear over time. Please consider copying and pasting the data relevant to the question in to your answer. – Andy Jun 17 '20 at 04:16

Kendo bar chart does not show data

2 Answers2