I'm working on a .NET MVC 5 project and using Kendo MVC Charts to display data on my dashboard. I'm facing two issues:

1. Sorting Issue: The chart is not displaying data in correct order on the x-axis, even though the data is sorted correctly on the server side. For example, the x-axis shows: "Dec - 2024", "Jul- 2024", "Aug - 2024", "Feb - 2024", "Jan - 2025", "Nov - 2024", "May - 2024". Notice that "Jan - 2025" appears in the middle, which shouldn't happen.

2. databound Event Not Firing: I wrote a custom function (chartDataBound) to sort the categories on the client side and bound it to the dataBound event of the Kendo chart. However, the function is not being called. I added an alert() inside the function to debug, but it never executed.

Client-Side Code (HTML + JavaScript):

<div class="col-md-6 pt-20"> 
        <label class="switch" title="Toggle to show numbers">
            <input id="toggleForChart8" type="checkbox">
            <span class="slider round"></span>
        </label>

        @(Html.Kendo().Chart<MiCATS.Models.ChartDataItem>()
    .Name("chart8")
    .Title("Gaps by Reasons")
    .Theme("bootstrap")
    .DataSource(dataSource => dataSource
    .Read(read => read.Action("GetGapsIdentifiedByReasonsAnalytics", "Analytics"))
    .Group(group => group.Add(model => model.Question))
     )

   .Series(series => {
    series.Column(model => model.GapsIdentified)
    .Aggregate(ChartSeriesAggregate.Sum)
    .Tooltip(tooltip => tooltip.Visible(true).Template("#= value # Gaps Identified for: #= series.name #"))
    .CategoryField("YearMonth")
    .Name("");
    })
    .Legend(legend => legend
    .Position(ChartLegendPosition.Bottom)
    .Spacing(122)
    .Labels(labels => labels.Template("#= truncateLegendLabel(text) #"))
     )
    .ValueAxis(axis => axis.Numeric().Color("black").Title("Gaps Count"))
    .CategoryAxis(axis => axis.Color("black").Labels(label => label.Rotation(-45)).Title("Months"))

    .Events(e => e.DataBound("chartDataBound"))
    .Events(events => events.SeriesClick("onChartBarClick2").Render("onChartRender"))
    .HtmlAttributes(new { style = "cursor: pointer;" })
)
    </div>

function chartDataBound(e) { 
    alert("Inside chartDataBound");
    var axis = e.sender.options.categoryAxis;
    var monthMap = {
        "Jan": 1,
        "Feb": 2,
        "Mar": 3,
        "Apr": 4,
        "May": 5,
        "Jun": 6,
        "Jul": 7,
        "Aug": 8,
        "Sep": 9,
        "Oct": 10,
        "Nov": 11,
        "Dec": 12,
    };

    axis.categories = axis.categories.sort(function (a, b) {
        // Ensure the categories are strings before splitting
        if (typeof a !== 'string' || typeof b !== 'string') return 0;

        var aParts = a.split(' ');
        var bParts = b.split(' ');

        // Check if the split worked correctly and both parts exist
        if (aParts.length < 2 || bParts.length < 2) return 0;

        var monthA = monthMap[aParts[0]];  // Get month number from the first part
        var monthB = monthMap[bParts[0]];
        var yearA = parseInt(aParts[2], 10);  // Get year as an integer from the second part
        var yearB = parseInt(bParts[2], 10);

        // Compare years first, then months if years are the same
        if (yearA === yearB) {
            return monthA - monthB;
        } else {
            return yearA - yearB;
        }
    });
}

What I've Tried:

1. Verified that the server-side data is sorted correctly.
2. Added console.log and alert() inside chartDataBound to debug, but the function is not being called.
3. Checked for JavaScript errors in the browser console but none found.

Questions:

1. Why is the dataBound event not firing, and how can I fix it?
2. How can I ensure the x-axis categories are sorted correctly in the Kendo chart?

I'm working on a .NET MVC 5 project and using Kendo MVC Charts to display data on my dashboard. I'm facing two issues:

1. Sorting Issue: The chart is not displaying data in correct order on the x-axis, even though the data is sorted correctly on the server side. For example, the x-axis shows: "Dec - 2024", "Jul- 2024", "Aug - 2024", "Feb - 2024", "Jan - 2025", "Nov - 2024", "May - 2024". Notice that "Jan - 2025" appears in the middle, which shouldn't happen.

2. databound Event Not Firing: I wrote a custom function (chartDataBound) to sort the categories on the client side and bound it to the dataBound event of the Kendo chart. However, the function is not being called. I added an alert() inside the function to debug, but it never executed.

Client-Side Code (HTML + JavaScript):

<div class="col-md-6 pt-20"> 
        <label class="switch" title="Toggle to show numbers">
            <input id="toggleForChart8" type="checkbox">
            <span class="slider round"></span>
        </label>

        @(Html.Kendo().Chart<MiCATS.Models.ChartDataItem>()
    .Name("chart8")
    .Title("Gaps by Reasons")
    .Theme("bootstrap")
    .DataSource(dataSource => dataSource
    .Read(read => read.Action("GetGapsIdentifiedByReasonsAnalytics", "Analytics"))
    .Group(group => group.Add(model => model.Question))
     )

   .Series(series => {
    series.Column(model => model.GapsIdentified)
    .Aggregate(ChartSeriesAggregate.Sum)
    .Tooltip(tooltip => tooltip.Visible(true).Template("#= value # Gaps Identified for: #= series.name #"))
    .CategoryField("YearMonth")
    .Name("");
    })
    .Legend(legend => legend
    .Position(ChartLegendPosition.Bottom)
    .Spacing(122)
    .Labels(labels => labels.Template("#= truncateLegendLabel(text) #"))
     )
    .ValueAxis(axis => axis.Numeric().Color("black").Title("Gaps Count"))
    .CategoryAxis(axis => axis.Color("black").Labels(label => label.Rotation(-45)).Title("Months"))

    .Events(e => e.DataBound("chartDataBound"))
    .Events(events => events.SeriesClick("onChartBarClick2").Render("onChartRender"))
    .HtmlAttributes(new { style = "cursor: pointer;" })
)
    </div>

function chartDataBound(e) { 
    alert("Inside chartDataBound");
    var axis = e.sender.options.categoryAxis;
    var monthMap = {
        "Jan": 1,
        "Feb": 2,
        "Mar": 3,
        "Apr": 4,
        "May": 5,
        "Jun": 6,
        "Jul": 7,
        "Aug": 8,
        "Sep": 9,
        "Oct": 10,
        "Nov": 11,
        "Dec": 12,
    };

    axis.categories = axis.categories.sort(function (a, b) {
        // Ensure the categories are strings before splitting
        if (typeof a !== 'string' || typeof b !== 'string') return 0;

        var aParts = a.split(' ');
        var bParts = b.split(' ');

        // Check if the split worked correctly and both parts exist
        if (aParts.length < 2 || bParts.length < 2) return 0;

        var monthA = monthMap[aParts[0]];  // Get month number from the first part
        var monthB = monthMap[bParts[0]];
        var yearA = parseInt(aParts[2], 10);  // Get year as an integer from the second part
        var yearB = parseInt(bParts[2], 10);

        // Compare years first, then months if years are the same
        if (yearA === yearB) {
            return monthA - monthB;
        } else {
            return yearA - yearB;
        }
    });
}

What I've Tried:

1. Verified that the server-side data is sorted correctly.
2. Added console.log and alert() inside chartDataBound to debug, but the function is not being called.
3. Checked for JavaScript errors in the browser console but none found.

Questions:

1. Why is the dataBound event not firing, and how can I fix it?
2. How can I ensure the x-axis categories are sorted correctly in the Kendo chart?

• javascript
• asp-mvc
• kendo-ui
• kendo-asp-mvc

1 Answer 1

The DataBound event doesn't fire because you are calling the Events method twice. My guess is that the second one replaces what you set in the first:

.Events(e => e.DataBound("chartDataBound"))
.Events(events => events.SeriesClick("onChartBarClick2").Render("onChartRender"))

Simply put them all together:

.Events(e => e.DataBound("chartDataBound").SeriesClick("onChartBarClick2").Render("onChartRender"))

As for the sorting, I'm not sure. Having fixed the DataBound event, your existing function may well then resolve that.