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

7 posts, 2 answers
  1. Gokhan
    Gokhan avatar
    15 posts
    Member since:
    Jan 2014

    Posted 10 Sep 2014 Link to this post

    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))
  2. Gokhan
    Gokhan avatar
    15 posts
    Member since:
    Jan 2014

    Posted 11 Sep 2014 Link to this post

    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"))

                
                      
                
        )
             
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Gokhan
    Gokhan avatar
    15 posts
    Member since:
    Jan 2014

    Posted 11 Sep 2014 Link to this post

    I have forgetten to add image. Here is my image.
  5. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 12 Sep 2014 Link to this post

    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.

     
  6. Gokhan
    Gokhan avatar
    15 posts
    Member since:
    Jan 2014

    Posted 12 Sep 2014 in reply to T. Tsonev Link to this post

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




  7. Answer
    Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 16 Sep 2014 Link to this post

    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.

     
  8. Gokhan
    Gokhan avatar
    15 posts
    Member since:
    Jan 2014

    Posted 16 Sep 2014 Link to this post

    Thank you very much for your help. I tried so many thing except your answer. It works great.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready