How to use Aggregate(ChartSeriesAggregate.Sum) Kendo Chart?

[Gokhan]

I am trying to calculate days interval(finish date - start date) and draw it with Kendo Chart.

My categories are like that:0-5 days; 6-10 days; 11-15 days; 16-20 days;...; Bigger than 30I

n my model, I have timespan day values, and string category names(0-5 days; 6-10 days; 11-15 days; 16-20 days).

model => model.zerotofivevalues = 3, 2 , 4 , 1
model => model.zerotofive = "0-5, "0-5", "0-5"

How can i remove blue prints at my attached picture and "null" ? I think, i have a problem with categorisation but i can't solve this problem.Here is my code:


@(Html.Kendo().Chart(Model)
.Name("chart")
.Series(series =>
{
series
.Column(model => model.zerotofivevalues, categoryExpression: model => model.zerotofive)
.Aggregate(ChartSeriesAggregate.Sum);

series
.Column(model => model.fivetotenvalues, categoryExpression: model => model.fivetoten)
.Aggregate(ChartSeriesAggregate.Sum);


series
.Column(model => model.tentofifteenvalues, categoryExpression: model => model.tentofifteen)
.Aggregate(ChartSeriesAggregate.Sum);

etc, etc, etc,


.CategoryAxis(axis => axis
.Categories("0-5", "5-10", "10-15", "15-20", "20-25")
.MajorGridLines(lines => lines.Visible(false))

[Gokhan]

I changed the code which is above a bit and I get what i want but now i have a "null category" problem. I don't want to show null category. So how can i hide or disable "null coloumn". 


@(Html.Kendo().Chart(Model)
    .Name("chart")
       
        

       .Legend(legend => legend
            .Visible(true)
            .Position(ChartLegendPosition.Top))
    .Series(series =>
    {
        series
           .Column(model => model.zerotofivevalues , categoryExpression: model => model.zerotofive ).Stack(ChartStackType.Normal)
           .Aggregate(ChartSeriesAggregate.Avg)
              .Labels(labels => labels.Visible(true).Position(ChartBarLabelsPosition.Center));

        series
          .Column(model => model.fivetotenvalue, categoryExpression: model => model.fivetoten).Stack(ChartStackType.Normal)
          .Aggregate(ChartSeriesAggregate.Count)
             .Labels(labels => labels.Visible(true).Position(ChartBarLabelsPosition.Center));

        series
     .Column(model => model.tentofifteenvalue, categoryExpression: model => model.tentofifteen).Stack(ChartStackType.Normal)
     .Aggregate(ChartSeriesAggregate.Count)
        .Labels(labels => labels.Visible(true).Position(ChartBarLabelsPosition.Center));

       


    }) .Theme("metro")
          .Tooltip(tooltip => tooltip
        .Visible(true)
                 .Template("#= series.name #: #= value #"))
            .Events(ev => ev.DataBound("onDB"))

            
                  
            
    )
         

[Gokhan]

I have forgetten to add image. Here is my image.

[T. Tsonev]

Hi,

In your scenario the categories are produced by combining all unique values of the category fields (zerotofive, fivetoten, ...). The values supplied to the category axis are ignored.
My guess is that the model entries actually have null values for some of these fields.

The cleanest solution would be to change the model to include, for example, a "Range" field.
This would be a string that can be any of the supported values "0-5", "5-10", etc. The series will be then bound as:
categoryExpression: model => model.Range

You can then ensure that Range contains only valid values in the model.
Does this make sense?

Regards,
T. Tsonev
Telerik

 

 

[Gokhan]

Hi Tsonev,

Thank you very much. It works great. I added Values and Range to my model.

Now i have a different problem. All columns have same color. Is there any option to change colors for different columns?

Here is the code.

series
           .Column(model => model.Values, categoryExpression: model => model.Range)
           .Aggregate(ChartSeriesAggregate.Count)
 .Labels(labels => labels.Visible(true).Position(ChartBarLabelsPosition.Center));

[Hristo Germanov]

Hi Gokhan,

If you have the color for each bar in your data you can set the color field and the bar color should be the color from your data. The second parameter for Column() is the colorField: 

series.Column(model => model.Close, model => model.Color, categoryExpression: model => model.Range)

Regards,
Hristo Germanov
Telerik

 

 

[Gokhan]

Thank you very much for your help. I tried so many thing except your answer. It works great.