How to bind list of object from razor code behind to Kendo chart in cshtml

Question

I'm trying to bind data from my Razor Code-behind page to my .cshtml file, to load the Kendo chart. What I'm trying to achieve is have the male and female counts in the bar with the X-axis being the admission term and the Y-axis being the count of Male and female.

currently, the data does not bind to the chart.

Please find What I have attempted below.

public async Task<IActionResult> OnGetStudentMDProgramAll()
    {
        AllStudents = await _studentService.GetStudentProgramsAll();
        
        foreach (var student in AllStudents)
        {
            StudentBreakdownReportModel std_brk_rpt_mdl = new StudentBreakdownReportModel();
            std_brk_rpt_mdl.AdmissionTerm = student.AdmissionTerm;
            std_brk_rpt_mdl.Female = AllStudents.Where(ad =>  ad.Student.Gender == "F").ToList().Count().ToString();
            std_brk_rpt_mdl.Male = AllStudents.Where(ad =>  ad.Student.Gender == "M").ToList().Count().ToString();
            std_brk_rpt_mdl.FemaleResidency_SC = AllStudents.Where(ad =>  ad.Student.Gender == "F" && ad.Student.Code == "SC").ToList().Count().ToString();
            std_brk_rpt_mdl.FemaleResidency_SPR = AllStudents.Where(ad =>  ad.Student.Gender == "F" && ad.Student.Code == "SPR").ToList().Count().ToString();
            std_brk_rpt_mdl.FemaleResidency_INTL = AllStudents.Where(ad =>  ad.Student.Gender == "F" && ad.Student.Code == "INTL").ToList().Count().ToString();
            std_brk_rpt_mdl.MaleResidency_SC = AllStudents.Where(ad =>  ad.Student.Gender == "M" && ad.Student.Code == "SC").ToList().Count().ToString();
            std_brk_rpt_mdl.MaleResidency_SPR = AllStudents.Where(ad =>  ad.Student.Gender == "M" && ad.Student.Code == "SPR").ToList().Count().ToString();
            std_brk_rpt_mdl.MaleResidency_INTL = AllStudents.Where(ad =>  ad.Student.Gender == "M" && ad.Student.Code == "INTL").ToList().Count().ToString();
            Report.Add(std_brk_rpt_mdl);
        }
        return new JsonResult(Report, new JsonSerializerSettings() { ContractResolver = new DefaultContractResolver() });
    }

Please find the Razor page Code below

@(Html.Kendo().Chart<Models.StudentBreakdownReportModel>()
    .Name("mdchart")
    .Title("Student Intake by Residency and Gender for MD Program")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Top)
    )
     .DataSource(ds => ds.Read(read => read.Type(HttpVerbs.Get).Url(Url.Page("StudentBreakdownReport", "StudentMDProgramAll"))))
     .Series(series =>
     {
         series.Column(model => model.Female).Name("Female").CategoryField("AdmissionTerm");
         series.Column(model => model.Male).Name("Male").CategoryField("AdmissionTerm");
     })

    .SeriesColors(
        "#cd1533", "#009bd7"
    )
    .CategoryAxis(axis => axis
        .Labels(labels => labels.Rotation(-90))
        .MajorGridLines(lines => lines.Visible(false))
    )
    .ValueAxis(axis => axis.Numeric()
        .Line(line => line.Visible(false))
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0:N0}")
    )
)

Please find the current chart I get here

Answer 1

From the codes posted, it's hard to find the problem. Please detail more debugging info.

1. Check Report is null or not in action.

2. Check the path of DataSource.

---

Here is the demo of Kendo-chart in ASP.NET Core.

@addTagHelper *, Kendo.Mvc


<div class="demo-section k-content wide">

  <kendo-chart name="chart">
    <chart-title text="Gross domestic product growth /GDP annual %/"></chart-title>
    <chart-legend position="ChartLegendPosition.Top"></chart-legend>
    <series-defaults type="ChartSeriesType.Column"></series-defaults>

    <series>
        <series-item name="India" data="new double[] { 3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855 }"></series-item>
        <series-item name="Russian Federation" data="new double[] { 4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3 }"></series-item>
        <series-item name="Germany" data="new double[] { 0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995 }"></series-item>
        <series-item name="World" data="new double[] { 1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727 }"></series-item>
    </series>

    <value-axis>
        <value-axis-item>
            <labels format="{0}%"></labels>
            <line visible="false" />
        </value-axis-item>
    </value-axis>

    <category-axis>
        <category-axis-item categories='new string[] { "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "20010", "2011", }'>
            <labels>
                <chart-category-axis-labels-padding top="135" />
            </labels>
            <line visible="false" />
        </category-axis-item>
    </category-axis>

    <tooltip visible="true" format="{0}%" template="#= series.name #: #= value #"></tooltip>
  </kendo-chart>
</div>