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