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

Stacked Bar using AJAX - how to project the model?

1 Answer 72 Views
This is a migrated thread and some comments may be shown as answers.
Nathan J Pledger
Top achievements
Rank 2
Nathan J Pledger asked on 08 Apr 2015, 04:48 PM


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?




1 Answer, 1 is accepted

Sort by
Iliana Nikolova
Telerik team
answered on 10 Apr 2015, 02:14 PM
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.

Asked by
Nathan J Pledger
Top achievements
Rank 2
Answers by
Iliana Nikolova
Telerik team
Share this question