Kendo UI Column Chart data binding not working - kendo-ui

Question

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.

Answer 1

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