Line chart correctly display categories with some missing values

2 posts, 0 answers
  1. Michael
    Michael avatar
    1 posts
    Member since:
    Jan 2015

    Posted 04 Nov 2015 Link to this post

    Here's my ViewModel

        public class EmailStartsViewModel
        {
            public int Year { get; set; }
            public int Week { get; set; }
            public int Starts { get; set; }
        }​

     I would like to display a line chart that has a category axis value for each week of the year i.e. 1 - 52, and that groups the data by year, so that it display a line for each year.

    The data covers 2012 through the present, and looks like this: 

    Year     Week Starts
    2013    1         1
    2015    1         11
    2014    2         1
    2015    2         8
    2013    3         3
    2015    3         20
    2013    4         9
    2015    4         30
    2012    5        1
    2013    5        3
    2014    5        1
    2015    5        18

    etc up to week 53 (because of partial weeks) 

     

    With these settings 

                      .DataSource(ds => ds
                          .Read(read => read
                              .Action("StartData", "Starts")
                              .Data("StartSettings"))
                          .Group( group => group.Add(model => model.Year))
                                  .Sort(sort => sort.Add(model => model.Week))
                      )
                      .Series(series =>
                      {
                          series.Line(model => model.Starts, categoryExpression: model => model.Week).Name("Starts");

                      })
                      .CategoryAxis(axis => axis
                          .Categories(model => model.Week)
                      )​

    It starts with week 5 which is the first week that has data in the first year. Weeks 1-4 aren't displayed

    I've tried various combinations like directly specifiying the categories 

    .CategoryAxis(axis => axis
                          .Categories("1", "2", "3", "4", "5", "6"....."52"))

    and removing the categoryExpression in 

    series.Line(model => model.Starts, categoryExpression: model => model.Week).Name("Starts");​

    and it either doesn't show all the weeks, or puts values in the wrong category, or both.

     What's the right way to go about this?

     

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 06 Nov 2015 Link to this post

    Hi Michael,

    In order to force the categories to start from week 1 you should manually sort the categories in the dataBound event: 
    @(Html.Kendo().Chart(Model)
       //...
       .Events(ev => ev.DataBound("onDB"))
    )
    <script>
    function onDB(e) {
       var chart = e.sender;
       chart.options.categoryAxis.categories.sort();
    }
    </script>
    For your convenience I prepared a dojo example (JavaScript version) which demonstrates the suggested approach in action. 

    Regards,
    Iliana Nikolova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top