ASP.Net Core Line Chart - Grouped Data - Error with orders of axies (type dates)

[Gabriel]

I have defined in my cshtml the charts with this

• the model : Html.Kendo().Chart<MyModelClass>()
• the datasource: 

.DataSource(ds =>
        {
            ds.Read(read => read.Action(Model.ActionMethod, Model.ControllerActionMethod).Type(HttpVerbs.Post));
            if (Model.SeriesGrouped)
            {
                //to create data groups
                ds.Group(group => group.Add(model => model.Group)).Sort(s => s.Add(m => m.Order));
            }
        })

 

The class MyModelClass is like this

public class MyModelClass
    {
        public string Group { get; set; }
        public string Category { get; set; }
        public DateTime Order { get; set; } 
      
    }

 

When all groups of my datasource has values for all axies thats work fine, by example if my datasource result is like this:

{Group:"A", Order:"01/2021", value="1000"}
{Group:"A", Order:"02/2021", value="1200"}
{Group:"A", Order:"03/2021", value="1100"}
{Group:"B", Order:"01/2021", value="2000"}
{Group:"B", Order:"02/2021", value="2200"}
{Group:"B", Order:"03/2021", value="2100"}

The chart displayed the axies in a good way, I mean the period is ordered  by date (first jan, then feb and las march) "   01/2021         02/2021            03/2021"

But when one group of the datasource result doesn't have values in a period the beahavior is diferent, the order of axies will be created depending of order of groupin that telerik chart create.  I will explain:

My datasource result is (i remove the first value to period 01/2021):

{Group:"A", Order:"02/2021", value="1200"}
{Group:"A", Order:"03/2021", value="1100"}
{Group:"B", Order:"01/2021", value="2000"}
{Group:"B", Order:"02/2021", value="2200"}
{Group:"B", Order:"03/2021", value="2100"}

then the axies on chart is displayed like this (firs feb, then march, then jan)  " 02/2021    03/2021   01/2021 "

so the result final in my implementation is like this

this problem doesn't happen when all groups has data for all axies, the field used for create the axies is a datetime.

 

 

[Mihaela]

Hi Gabriel,

I would suggest adding an additional integer or enum type Model property that holds the month number and sorting the data by it:

//Model
public class MyModelClass
{
        ....
        public MonthNumber MonthNumber { get; set; }
}

public enum MonthNumber
{
        January = 1,
        February = 2,
        ...
        December = 12
}

//View
.DataSource(ds =>
{
  ...
  ds.Group(group => group.Add(model => model.Group)).Sort(s => s.Add(m => m.MonthNumber));
})

Please give this approach a try and let me know if it works as expected at your end. Otherwise, please consider sharing the Chart configuration at your end.

[Gabriel]

Hi Mihaela, thanks, but it doesn't work, the problem is the same, and its because my categoryfield is a string,  so (in base a my reading), when the categoryfield is a string, telerik order the data in the same order that the data is received.  Beside that my data is grouped, so telerik first group the data, and later order each group, so the categories are created in order

First group category are "02/2021", "03/2021", second group the category are "01/2021" , "02/2021", so the final display of category are "02/2021", "03/2021", and "01/2021"

I need that the categoryfield in text because i show date and other values that cant be formated , quarter, semester and trimester".

 

Kind regards.

[Mihaela]

Hi Gabriel,

I have prepared a runnable sample based on the shared code snippets and screenshots. You can find it attached. Would you please modify it based on the behavior you are experiencing and send it back in the thread? I will observe it locally and follow up with the respective suggestions.

Thank you for your cooperation.