Kendo UI Column Chart data binding not working

1 Answer 133 Views
Chart
Akhila
Top achievements
Rank 1
Akhila asked on 15 Feb 2023, 05:52 PM
 
In MVC application I am using Kendo column charts and I have the data as below.
TypePercentageDateColor
A25.52/12#2456C7
B702/13#2456C8
B502/14#2456C8
B55.52/15#2456C8
A60.32/13#2456C8

I want to create a column chart with this data, chart should be categorized by Date and there should be multiple columns depending on the type.

I wrote the below code snippet but it isn't working, cannot see the data on UI.

 @(Html.Kendo().Chart<EntitiesA.Report>
                ()
                .Name("Report")
                .Title("ReportA")
                .Legend(legend => legend
                .Position(ChartLegendPosition.Top)
                )
                .DataSource(dataSource => dataSource
                    .Read(read => read.Action("MethodReport", "ReportController"))
                    .Group(group => group.Add(model => model.Type))
                    .Sort(sort => sort.Add(model => model.Date).Ascending())
                )
                .Series(series =>
                {
                    series.Column(model => model.Percentage)
                        .Name("#= group.value # (Percentage)").CategoryField("Date").ColorField("Color");
                })
                .Legend(legend => legend
                    .Position(ChartLegendPosition.Bottom)
                )
                .CategoryAxis(axis => axis
                    .Labels(labels => labels.Format("MM/DD"))
                )
                .ValueAxis(axis => axis.Numeric()
                                .Labels(labels => labels.Format("{0:N0}"))
                                .MajorUnit(20)
                                .Max(100)
                                .Line(line => line.Visible(false))
                )
                .Tooltip(tooltip => tooltip
                .Visible(true)
                .Format("{0:N0}")
                )
                ) 

I don't see any data in the graph it is blank how to fix it, am I missing any logic or piece of code.

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 20 Feb 2023, 10:19 AM

Hello Akhila,

 

Thank you for writing to us.

The description sounds like you are looking for a Bar Chart of type Column:
https://demos.telerik.com/aspnet-mvc/bar-charts/column

Here is a sample with Remote binding:
https://demos.telerik.com/aspnet-mvc/bar-charts/remote-data-binding

If the data is not displayed, it means that probably there is some kind of script or controller action error. Can you open the page on Chrome browser and open the F12 inspector console to check whether there are any errors? And then open the Network tab and check if the Read action of the Controller is accessible and returns the correct data as expected? It should look like this:

Can you send me a snapshot of your Network tab?

 

Regards,
Eyup
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Chart
Asked by
Akhila
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Share this question
or