Reputation: 51
I am working on an ASP.NET MVC 5 application and I'm trying to display a Kendo line chart. The chart should plot month and year on the x-axis and compliance percentage on the y-axis, with a line series representing the compliance percentage for each adjudicator.
However, the chart is not rendering any data, and it's appearing blank.
Here is my Kendo chart configuration in the view:
<div class="col-md-6 pt-20">
@(Html.Kendo().Chart<MiCATS.Models.ChartDataItem2>()
.Name("chart11")
.Title("Compliance by Adjudicator")
.Theme("bootstrap")
.DataSource(dataSource => dataSource
.Read(read => read.Action("ComplianceByAdjudicator", "Analytics"))
)
.Series(series => {
series.Line(model => model.CompliancePercent);
})
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.ValueAxis(axis => axis.Numeric().Labels(labels => labels.Format("{0}%")).Color("black").Title("Compliance Percent"))
.CategoryAxis(axis => axis.Categories(model => model.YearMonth).Color("black").Title("Months"))
)
</div>
Despite the response containing data, the chart remains blank. I have verified that the JSON response contains the expected data. Here are a few things I've tried, but without success:
YearMonth
.ComplianceByAdjudicator
action returns the correct data.What am I missing or doing wrong? Why is the Kendo chart not displaying the data?
Here is the model used for the chart data:
using System;
using System.Collections.Generic;
namespace MiCATS.Models
{
public class AnalyticsChartViewModel
{
public string SeriesName { get; set; }
public string SeriesName2 { get; set; }
public string SeriesName3 { get; set; }
public string Department { get; set; }
public string Year { get; set; }
public int Year2 { get; set; }
public string XAxisLabel { get; set; }
public double SeriesValue { get; set; }
public double SeriesValue2 { get; set; }
public double SeriesValue3 { get; set; }
public double SeriesValue4 { get; set; }
public double SeriesValue5 { get; set; }
public double SeriesValue6 { get; set; }
public double SeriesValue7 { get; set; }
public List<ChartDataItem> ChartData { get; set; }
public List<ChartDataItem2> ChartData2 { get; set; }
}
public class ChartDataItem
{
public int Year { get; set; }
public int Month { get; set; }
public int QuestionId { get; set; }
public string Question { get; set; }
public string Section { get; set; }
public int GapsIdentified { get; set; }
public string YearMonth { get; set; }
public string Date { get; set; }
}
public class ChartDataItem2
{
public int Year { get; set; }
public int Month { get; set; }
public double CompliancePercent { get; set; }
public string Adjudicator { get; set; }
public string YearMonth { get; set; }
}
}
Here is the response I am getting:
{
"ChartData": null,
"ChartData2": [
{"Year": 2024, "Month": 3, "CompliancePercent": 38.33, "Adjudicator": "A", "YearMonth": "March 2024"},
{"Year": 2024, "Month": 4, "CompliancePercent": 80, "Adjudicator": "B", "YearMonth": "April 2024"},
{"Year": 2024, "Month": 5, "CompliancePercent": 92.14, "Adjudicator": "C", "YearMonth": "May 2024"},
{"Year": 2024, "Month": 3, "CompliancePercent": 58, "Adjudicator": "D", "YearMonth": "March 2024"}
],
"Department": null,
"SeriesName": null,
"SeriesName2": null,
"SeriesName3": null,
"SeriesValue": 0,
"SeriesValue2": 0,
"SeriesValue3": 0,
"SeriesValue4": 0,
"SeriesValue5": 0,
"SeriesValue6": 0,
"SeriesValue7": 0,
"XAxisLabel": null,
"Year": null,
"Year2": 0
}
Upvotes: 0
Views: 24