stacked bar with varying data

2 posts, 0 answers
  1. Paul
    Paul avatar
    1 posts
    Member since:
    Jan 2016

    Posted 17 Nov 2016 Link to this post

    There's probably a simple way to do this but I'm darned if I can figure out what.

    I want to build a stacked bar chart roughly similar to the example at http://demos.telerik.com/kendo-ui/bar-charts/stacked-bar. The chart will show the top-N user activity per day. So for today, let's say that Alice did 100 units of work, Bob did 75, and Carole did 82. I want the stack to reflect that. Yesterday Mike did 75, Alice did 84, and Eve did 84.

    I'm having a hard time figuring out how to get the stacks to reflect my data. Basically what I want is a stack for each day, with each "slice" of the stack showing activity. All of the Kendo chart types seem to assume that you'll have the same stacks every day, e.g. that every day I want to show what Alice, Bob, and Carole did. What I actually want is to show a stack per day where the components of the stack show (and the tooltip reflects) whatever the most active users for that day did. The same users may be most-active on multiple days but they may not.

    Is there a straightforward way to do this with the built-in chart types?

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2621 posts

    Posted 21 Nov 2016 Link to this post

    Hi Paul,

    For this scenario I would suggest to group the chart dataSource:

    http://docs.telerik.com/kendo-ui/controls/charts/data-binding#bind-to-grouped-data

    Please keep in mind that when there is a different number of points in each of the groups you should specify series.categoryField instead of categoryAxis.field

    http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.categoryField

    Take a look at this example which demonstrates the suggested approach in action: 

    http://dojo.telerik.com/@Iliana/aKiza

    Regards,
    Iliana Nikolova
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Back to Top