Stacked Bar using AJAX - how to project the model?

[Nathan J Pledger]

 

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 http://demos.telerik.com/aspnet-mvc/bar-charts/remote-data-binding I can get the chart to display using the following code:

@(Html.Kendo().Chart<RequestLoadingSummaryAggregate>()
    .Name("resourceLoadingChart")
    .Title("Resources")
    .Legend(legend=>legend.Visible(false))
    .DataSource(dataSource=>dataSource.Read(read=>read.Action("RequestLoadingSummary","Home")))
    .Series(series =>
    {
        series.Column(model => model.Items).Name("Resource");
    })
    .CategoryAxis(axis=>axis
        .Categories(model=>model.UserName)
        .Labels(labels=>labels.Rotation(-90))
        .MajorGridLines(lines=>lines.Visible(false))
        )
    .ValueAxis(axis=>axis.Numeric()
        .Labels(labels=>labels.Format("{0:N0}"))
        .MajorUnit(100)
        .Line(line=>line.Visible(false))
        )
    .Tooltip(tooltip=>tooltip
        .Visible(true)
        .Format("{0:N0}")
        )
        .ChartArea(chartArea=>
        chartArea.Height(400))
      )

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

 

.SeriesDefaults(seriesDefaults =>
    seriesDefaults.Column().Stack(ChartStackType.Normal)
)

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?

Thanks

 

Nathan

[Iliana Dyankova]

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.

Regards,
Iliana Nikolova
Telerik