In MVC application I am using Kendo range bar charts and I have the data as below.
| Type | FromDate | ToDate |
|---|---|---|
| Type1 | 01/10/2023 | 02/17/2023 |
| Type2 | 02/17/2023 | 02/21/2023 |
I want to create a range bar chart with this data, chart should be categorized by Type.
Y-axis should be Type and x-axis is date range (fromdate to todate)
I wrote the below code snippet but it isn't working, cannot see the data on UI
@using Microsoft.AspNetCore.Http;
@using Kendo.Mvc.UI
@addTagHelper *, Kendo.Mvc
@*@{
ViewData["Title"] = "Test";
}*@
<div class="n-container">
<div class="panel panel-info" style="text-align: center; height: 100%; width: 100%;">
<h4 style="text-align: center; margin-bottom: 0px;">Project Timeline</h4>
@(Html.Kendo().Chart<ProjectEntities.TimelineData>()
.Name("Timeline")
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
)
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetTimelineReportData", "Report"))
)
.Series(series =>
{
series.RangeBar(model => model.FromDate, model => model.ToDate);
})
.CategoryAxis(axis => axis
.Categories(model => model.Type)
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis.Date()
.Labels(labels => labels.Format("MM/dd/yyyy"))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= value.from # - #= value.to #"))
)
</div>
</div>
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 and x-axis is showing numeric values instead of dates.