This is a migrated thread and some comments may be shown as answers.

Stacked Bars binds incorrectly when bound to a model

2 Answers 104 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Paul Nearney
Top achievements
Rank 1
Paul Nearney asked on 09 Sep 2014, 03:59 PM
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 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 11 Sep 2014, 08:30 AM
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.

 
0
Paul Nearney
Top achievements
Rank 1
answered on 11 Sep 2014, 10:04 AM
Fantastic, many thanks - that works great.

Paul
Tags
Chart
Asked by
Paul Nearney
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Paul Nearney
Top achievements
Rank 1
Share this question
or