Stacked Bar using AJAX - how to project the model?

2 posts, 1 answers
  1. Nathan J Pledger
    Nathan J Pledger avatar
    95 posts
    Member since:
    Apr 2006

    Posted 08 Apr 2015 Link to this post


    I have restricted horizontal space on a page, but have multiple values to display in a graph. I thought a single-column, stacked column chart would fit the bill. I'm interested in showing proportion of values.

     I have a simple model:

    •  UserName
    • Items

    Using the AJAX mechanism shown here I can get the chart to display using the following code:

        .Series(series =>
            series.Column(model => model.Items).Name("Resource");

    But I cannot get it to work as a Stacked Column using the additional defaults:


    .SeriesDefaults(seriesDefaults =>

    How can I project the model from the AJAX result into a form that the chart can understand such that the values occupy a single column with multiple values?




  2. Answer
    Iliana Nikolova
    Iliana Nikolova avatar
    2622 posts

    Posted 10 Apr 2015 Link to this post

    Hi Nathan,

    In order to get a stacked chart you need at least two series. If I understand correctly each UserName should be a separate bar? This can be achieved as grouping the dataSource (like in this online demo): 
    .DataSource(dataSource => dataSource
       .Read(read => read.Action("RequestLoadingSummary", "Home"))
       .Group(group => group.Add(model => model.UserName))
    In case I am missing something please elaborate a bit more on the exact scenario you are trying to implement - this way I would be able to advice you further and provide concrete recommendations.

    Iliana Nikolova

    See What's Next in App Development. Register for TelerikNEXT.

Back to Top