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

Michael Wang · Answer 1 · 2020-07-24T09:59:59.560

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

Check Report is null or not in action.
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>

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

1 Answers1