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 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

  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 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.

    Regards,
    Iliana Nikolova
    Telerik
     

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

     
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top