This is a migrated thread and some comments may be shown as answers.

Replicating chart in Excel

6 Answers 15 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Veteran
Lee asked on 23 May 2018, 08:29 AM

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; }
}

6 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 24 May 2018, 04:36 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Lee
Top achievements
Rank 1
Veteran
answered on 24 May 2018, 04:47 AM

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.

0
Stefan
Telerik team
answered on 25 May 2018, 05:17 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Lee
Top achievements
Rank 1
Veteran
answered on 26 May 2018, 12:39 AM

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.

0
Lee
Top achievements
Rank 1
Veteran
answered on 26 May 2018, 09:42 PM

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.

0
Stefan
Telerik team
answered on 28 May 2018, 06:01 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Chart
Asked by
Lee
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Lee
Top achievements
Rank 1
Veteran
Share this question
or