Kendo bar range chart data is not getting bound on UI for date field

36 views Asked by At

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.

0

There are 0 answers