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

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

6 Answers 360 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Gokhan
Top achievements
Rank 1
Gokhan asked on 10 Sep 2014, 02:53 PM
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))

6 Answers, 1 is accepted

Sort by
0
Gokhan
Top achievements
Rank 1
answered on 11 Sep 2014, 10:53 AM
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"))

            
                  
            
    )
         
0
Gokhan
Top achievements
Rank 1
answered on 11 Sep 2014, 10:54 AM
I have forgetten to add image. Here is my image.
0
Accepted
T. Tsonev
Telerik team
answered on 12 Sep 2014, 08:42 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Gokhan
Top achievements
Rank 1
answered on 12 Sep 2014, 11:34 AM
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));




0
Accepted
Hristo Germanov
Telerik team
answered on 16 Sep 2014, 07:53 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Gokhan
Top achievements
Rank 1
answered on 16 Sep 2014, 08:00 AM
Thank you very much for your help. I tried so many thing except your answer. It works great.
Tags
Chart
Asked by
Gokhan
Top achievements
Rank 1
Answers by
Gokhan
Top achievements
Rank 1
T. Tsonev
Telerik team
Hristo Germanov
Telerik team
Share this question
or