CODEWITHSUNDEEP
kendo-uicolumn-chart
Sri K
Sri K

Reputation: 1

Kendo UI Column Chart data binding not working

In MVC application I am using Kendo column charts and I have the data as below.

Type Percentage Date Color
A 25.5 2/12 #2456C7
B 70 2/13 #2456C8
B 50 2/14 #2456C8
B 55.5 2/15 #2456C8
A 60.3 2/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.

Upvotes: 0

Views: 99

Answers (1)

Aleksandar
Aleksandar

Reputation: 1359

If I'm not mistaken you want a Date axis, right? If so you can also specify that via the CategoryAxis configuration:

@(Html.Kendo().Chart<Report>()
            .CategoryAxis(axis => axis
                .Date()
                .BaseUnit(ChartAxisBaseUnit.Days)
                .Labels(labels => labels.Format("MM/dd"))
            )
           ...
  )

Passing some sample data renders the Chart - example

Upvotes: 0

Related Questions