Stacked Bars binds incorrectly when bound to a model

[Paul Nearney]

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

[T. Tsonev]

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

 

 

[Paul Nearney]

Fantastic, many thanks - that works great.

Paul