Line Chart with Grouped Data Not Plotting Correctly

[Mike]

I have a line chart that I am grouping the data by a "type" field.  The data set is by type, year, and amount.  Most of the time, the data is in only one type.  The problem is if there are multiple types available across multiple years, the chart wants to put the data on the 1st year even if it should not belong there.

In the example attached, there are 3 types.  The data is for 2020 - 2023 (fiscal years).  The 2nd and 3rd types are only for 2023 while the 1st type has data for 2020-2022.  The chart does not show 2023 and added the 2nd and 3rd types to the 2020 category.

Is what I am doing possible with a line chart? I did try to make a scatter line work however I have not been able to make display with the data.

HTML:

@(Html.Kendo().Chart<Model>()
            .Name("chart")
            .Legend(legend => legend.Visible(true).Position(ChartLegendPosition.Bottom))
            .SeriesColors("#FF9900", "#005757", "#95B9C7")
            .Series(series =>
            {
                series.Line(v => v.Amount).Labels(l => l.Visible(true).Format("{0:n0}"))
                    .Tooltip(tooltip => tooltip.Visible(true).Template("#= dataItem.Label #: #= kendo.format('{0:n0}', dataItem.Amount) #"));
            })
            .CategoryAxis(axis => axis.Categories(m => m.FiscalYearCode).Labels(l => l.Visible(true)))
            .ValueAxis(va => va.Labels(l => l.Format("{0:c0}")))
            .DataSource(ds =>
            {
                ds.Read(read => read.Action("Get", "Home"))
                .Group(g => g.Add(a => a.AmountType));
            })
        )

Model:

public class Model
    {
        public string FiscalYearCode { get; set; }
        public int Amount { get; set; }
        public string Label { get; set; }
        public string ObjectDescription { get; set; }
        public string AmountType { get; set; }
    }

[Stoyan]

Hello Mike,

Thank you for sharing code snippets and a screenshot.

As far as I understand the issue arises because lines do not appear as they do in the Line Chart's and Scatter Chart's Binding to Grouped Data Demos.

The difference in the configurations between the Demos and the snippets you have shared is the Name:

.Name("#= group.value # (close)");

Could you please try defining the Name property as shown above?

If the issue still persists consider sharing a small isolated project that replicates the behavior observed on your side as this will enable me to investigate the issue in more depth. Thank you.

Regards,
Stoyan
Progress Telerik

[Mike]

Unfortunately this did not work. It didn't make any difference.

[Mike]

I updated the HTML to the following.  I could not make the line series work but I was able to make the Scatter Line work.

 

@(Html.Kendo().Chart<Model>()
            .Name("chart")
            .Legend(legend => legend.Visible(true).Position(ChartLegendPosition.Bottom))
            .SeriesColors("#FF9900", "#005757", "#95B9C7")
            .Series(series =>
            {
                series.ScatterLine(m => m.FiscalYearCode, m => m.Amount).Name("#= group.value #")
                    .Tooltip(tooltip => tooltip.Visible(true).Template("#= dataItem.Label #: #= kendo.format('{0:n0}', dataItem.Amount) #"));
            })
            .XAxis(x => x.Date().Max(max))
            .YAxis(y => y.Numeric().Labels(l => l.Format("{0:n0}")))

[Stoyan]

Hi Mike, 

I am glad the Scatter Chart is now working as expected.

To address the issue in the Line Chart I have created a sample project that showcases the Line Chart's binding to grouped data. Please review the attachment and edit it to reproduce the behavior observed on your side.

This will enable me to suggest a possible workaround. Thank you for your cooperation.