Stacked Bars binds incorrectly when bound to a model

3 posts, 0 answers
  1. Paul Nearney
    Paul Nearney avatar
    2 posts
    Member since:
    Mar 2010

    Posted 09 Sep 2014 Link to this post

    I'm having trouble binding a stacked bar chart to a local Model.

    If I keep the data inline in the Razor file, all works fine (see attached Inline.png for the results):

    <div class="chart-wrapper">
        @(Html.Kendo().Chart(Model.SeriesData)
            .Name("chart")
            .Title("Test Chart")
            .Legend(legend => legend
                .Visible(false)
            )
            .SeriesDefaults(seriesDefaults =>
                seriesDefaults.Bar().Stack(ChartStackType.Normal)
            )
            .CategoryAxis(axis => axis
                .Categories("Bob Jones", "Sarah Giant")
                .MajorGridLines(lines => lines.Visible(false))
            )
            .ValueAxis(axis => axis
                .Numeric()
                .Line(line => line.Visible(false))
                .MajorGridLines(lines => lines.Visible(true))
            )
            .Series(series =>
            {
                series.Bar(new double[] { 10, 17 }).Color("#f3ac32");
                series.Bar(new double[] { 30, 27 }).Color("#b8b8b8");
                series.Bar(new double[] { 10, 17 }).Color("#e3ac32");
                series.Bar(new double[] { 30, 27 }).Color("#ab6e36");
            })
            .Tooltip(tooltip => tooltip
                .Visible(true)
                .Template("#= series.name #: #= value #")
            )
        )
    </div>

    However, if I move the data to a model, it seems to bind incorrectly (See attached bound.png for the results):

    @model LyncMeetingReporting.Report.Controllers.ChartModel
    <div class="chart-wrapper">
        @(Html.Kendo().Chart(Model.SeriesData)
            .Name("chart")
            .Title("Test Chart")
            .Legend(legend => legend
                .Visible(false)
            )
            .SeriesDefaults(seriesDefaults =>
                seriesDefaults.Bar().Stack(ChartStackType.Normal)
            )
            .CategoryAxis(axis => axis
                .Categories(Model.Attendees)
                .MajorGridLines(lines => lines.Visible(false))
            )
            .ValueAxis(axis => axis
                .Numeric()
                .Line(line => line.Visible(false))
                .MajorGridLines(lines => lines.Visible(true))
            )
            .Series(series =>
            {
                series.Bar(m => m.Data, m => m.Colour);
            })
            .Tooltip(tooltip => tooltip
                .Visible(true)
                .Template("#= series.name #: #= value #")
            )
        )
    </div>

    The model:

    public ActionResult Log(Guid? id, MeetingDetailsType? type)
    {
        var chartModel = new ChartModel() {
            Attendees = new string[] { "Bob Jones", "Sarah Giant" },
            SeriesData = new SeriesData[]
            {
                new SeriesData() { Colour = "#f3ac32", Data = new double[] { 10, 17 }},
                new SeriesData() { Colour = "#b8b8b8", Data = new double[] { 30, 27 }},
                new SeriesData() { Colour = "#e3ac32", Data = new double[] { 10, 17 }},
                new SeriesData() { Colour = "#a8b8b8", Data = new double[] { 30, 17 }},
            }
        };
     
        return View(chartModel);
    }
     
    public class ChartModel
    {
        public IEnumerable<string> Attendees { get; set; }
        public IEnumerable<SeriesData> SeriesData { get; set; }
    }
     
    public class SeriesData
    {
        public double[] Data {get; set;}
        public string Colour {get; set; }
    }

  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 11 Sep 2014 Link to this post

    Hi,

    I see that you're binding the series to a nested arrays in the model. This is not supported.

    The series can either be bound to a series field, e.g.
    series.Bar(m => m.SeriesA, m => m.Colour);
    series.Bar(m => m.SeriesB, m => m.Colour);
    ...


    A better match for your model is to bind to the value collection directly:
    for (var data in Model.SeriesData) {
      series.Bar(data.Data).Color(data.Colour);
    }


    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Paul Nearney
    Paul Nearney avatar
    2 posts
    Member since:
    Mar 2010

    Posted 11 Sep 2014 in reply to T. Tsonev Link to this post

    Fantastic, many thanks - that works great.

    Paul
Back to Top