Replicating chart in Excel

[Lee]

Hi,

I have a chart in Excel i'd like to replicate, i've attached an image of it (Chart1). I've currently gotten this far (Chart2).

Here's the code:

@(Html.Kendo().Chart<UtilisationOverall>()
    .Name("chart2")
    .Title("RDO")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Top)
    )
    .DataSource(ds => ds
        .Read(read => read.Action("UserUtilisationListRdoAjax", "Kendo", new { returnType = AjaxReturnType.Json }))
        .Group(group =>
        {
            group.Add(model => model.FullName);
        })
    )
    .Series(series =>
    {
        series.Column(model => model.TimesheetHours, categoryExpression: model => model.FullName)
            .Aggregate(ChartSeriesAggregate.Sum)
            .Stack(ChartStackType.Normal)
            .Name("#= group.value #");
    })
    .SeriesColors(Colours.Blue, Colours.Orange, Colours.Grey, Colours.Yellow, Colours.LightBlue, Colours.Green)
    .CategoryAxis(axis => axis
        .Labels(l => l.Rotation(90))
        .MajorGridLines(lines => lines.Visible(false))
    )
    .ValueAxis(axis => axis
        .Numeric()
        .Line(line => line.Visible(false))
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Template("#= series.name #: #= kendo.format('{0:N0}', value) #")
    )
)

 

2 Issues:

1. I'm not sure how to stack the sum of TimesheetHours into the Month and Year from TimesheetWorkDateMonthYear (DateTime)
2. I don't now how to get the Key to should the Month and Year instead of the Person (FullName)

 

My Class:

public class UtilisationOverall
{
    /// <summary>
    /// Persons Full Name
    /// </summary>
    public string FullName { get; set; }

    /// <summary>
    /// Timesheet Work Date Month Year
    /// </summary>
    public DateTime TimesheetWorkDateMonthYear { get; set; }

    /// <summary>
    /// Timesheet Overhead
    /// </summary>
    public string TimesheetOverhead { get; set; }

    /// <summary>
    /// Timesheet Hours
    /// </summary>
    public double TimesheetHours { get; set; }
}

[Stefan]

Hello, Lee,

Thank you for the details.

Regarding for questions:

1) In order to achieve the desired stacked result, please set the seriesDefault stack property. This is demonstrated in our demo as well. This will require the different stack values to be in different series:

https://demos.telerik.com/aspnet-mvc/bar-charts/grouped-stacked-bar

2) This should show as expected if the Dates are set as different series and the Person name is set as category axis values. This is also required to achieve the desired stacked result. The same.

If additional assistance is needed, please let me know and I will gladly assist.

Regards,
Stefan
Progress Telerik

[Lee]

Hi Stefan,

Is that possible though as i'm using the Model to dynamically create the Columns? In the example you have to Specify the Name for the Range? So how would i populate that? This would the The Year and Month from TimesheetWorkDateMonthYear property.

But in the example it's hard coded "(.Name("0-19"))" it also needs to be dynamic.

[Stefan]

Hello, Lee,

Apologies, I send the next to the right example which was again stacked, but the grouped part was not needed:

https://demos.telerik.com/aspnet-mvc/bar-charts/stacked-bar

The stacked Chart required a Series for every stacked field in this case field that holds the value "Month-year":

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.stack#series.stack

Regards,
Stefan
Progress Telerik

[Lee]

Hi Stefan,

This still doesn't answer my question: How do i do that using the Model, dynamically based off of the information i provided to you?

I get you want people to read the demos, but none of them show such functionality. I find your MVC/ASP.NET demos are rather limited and you always refer to the jquery version when all functionality isn't available in the MVC wrapper...

Lee.

[Lee]

Ok, i found the answer via another post here which linked me to:
https://docs.telerik.com/aspnet-mvc/helpers/chart/how-to/create-dynamic-series#create-view-model-bound-dynamic-series

I downloaded the sample project and saw how they'd used two classes to store they data and then build the graph from. I have now successfully got the chart to work.

[Stefan]

Hello, Lee,

I glad to hear that the example was demonstrating how to achieve the desired result.

I would also want to apologize that I did not refer to it earlier. I recommended the demo because it was demonstrating the required Chart configuration for the stacked Chart, but it was missing the dynamic part.

Indeed, our demos are showing basic and common scenarios as their point showcases the minimum required code to achieve the desired result.

We do have an how to section for every widget and a knowledge base portal which are covering more complex examples which are coming directly from a real-life scenario face by the Kendo UI community:

https://docs.telerik.com/kendo-ui/knowledge-base

Regards,
Stefan
Progress Telerik