Kendo UI MVC - How to bind dynamically data of type double[]

Question

I'm getting the following error trying to bind a colunm to a Kendo UI MVC Chart:

InvalidOperationException: Bound columns require a field or property access expression.

<div class="demo-section k-content wide">
      @(Html.Kendo().Chart(Model)
        .Name("chart")
        .Theme("blueOpal")
        .HtmlAttributes(new { style = "height: 400px;" })
        .Title("Site Visitors Stats /thousands/")
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
        )
        .SeriesDefaults(seriesDefaults => seriesDefaults
            .Column().Stack(true)
        )
        .Series(series =>
        {
          series.Column(model => ChartDataHelper.GetWeekTotals(model.Invoices)).Name("Week Totals"); // fails
          series.Column(new double[] { 52000, 34000, 23000, 48000, 67000, 83000 }).Name("Unique visitors"); // works
        })
        .CategoryAxis(axis => axis
            .Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
            .MajorGridLines(lines => lines.Visible(false))
        )
        .ValueAxis(axis => axis
            .Numeric()
            .Line(line => line.Visible(false))
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}")
        )
      )
    </div>

Here is the code for the helper static class:

public static class ChartDataHelper
    {
        public static decimal[] GetWeekTotals(ICollection<InvoiceDto> invoices)
    {
        var currentWeekNumber = DateHelper.GetWeekOfYear(DateTime.Now);
        var firstWeekNumber = currentWeekNumber - 5;

        decimal[] results = new decimal[5];

        for (var i = 0; i < 5; i++)
        {
            results[i] = invoices.Where(o =>
                o.InvoiceDate.Year == DateTime.Now.Year &&
                DateHelper.GetWeekOfYear(o.InvoiceDate) == (firstWeekNumber + i)
            ).Sum(o => o.TotalNetCharge);
        }

        return results;
    }

It seems that since decimal[] is not a primitive type there seems to be a problem passing data dynamically, but when creating an anonymous object of type double[], as seen in the second series column, there's no problem. How so?

Just a thought, but instead of using a static helper class to generate the array of weekly totals, would it be possible instead to add a field/property to the model to expose the same aggregated information about invoice totals? — Neil Hibbert
Not sure if this will be the cause of the issue, but your GetWeekTotals function instantiates an array of decimal with a length of 5 but your loop only assigns values to the array at position < 5 i.e. position 5 isn't gonna get populated with a value. PS to extend on @NeilHibbert comment above, some reference material — Sandman
@NeilHibbert, it seems strange that you can only bind an int or string to a chart column... — JF Beaulieu
@JFBeaulieu are you sure this is correct? the error message only implies that 'Bound columns require a field or property access expression' it doesn't mention about int or strings only...? — Neil Hibbert
@NeilHibbert, I have already tried to expose a member type decimal[] but this generates this error: InvalidOperationException: The property 'WeeksTotals' could not be mapped, because it is of type 'Decimal[]' which is not a supported primitive type or a valid entity type. Either explicitly map this property, or ignore it. — JF Beaulieu

Mohan Singh Mohan Singh · Accepted Answer · 2017-06-19T17:13:30

Try somethingh Like this

Create a Model

 public class ChartsModel
 {       
    public double invoices { get; set; }
   public int Currentweek{ get; set; }
 }

modify your controller

public JsonResult _BindInvoiceChart()
    {
        List<InvoiceDto> invoices=your_functionToGetInvoices();
        List<ChartsModel> res = new List<ChartsModel>();    
        var currentWeekNumber = DateHelper.GetWeekOfYear(DateTime.Now);
        var firstWeekNumber = currentWeekNumber - 5;
        for (var i = 0; i < 5; i++)
         {
          ChartsModel chartsModel=new ChartsModel();
          chartsModel.Currentweek=i;
          chartsModel.invoices  = invoices.Where(o =>
            o.InvoiceDate.Year == DateTime.Now.Year &&
            DateHelper.GetWeekOfYear(o.InvoiceDate) == (firstWeekNumber + i)
        ).Sum(o => o.TotalNetCharge);   
        res.Add(chartsModel)
        }   
        return Json(res, JsonRequestBehavior.AllowGet);
    }

View

@(Html.Kendo().Chart<ChartsModel>()
         .HtmlAttributes(new { style = "width:100%;height:263px" })
  .Name("InvoiceChart")
  .DataSource(dataSource => dataSource
  .Read(read => read.Action("_BindInvoiceChart", "yourCOntrollerName")) // Specify the action method and controller name
  )
  .Name("chart")
    .Theme("blueOpal")
    .HtmlAttributes(new { style = "height: 400px;" })
    .Title("Site Visitors Stats /thousands/")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
    )
    .SeriesDefaults(seriesDefaults => seriesDefaults
        .Column().Stack(true)
    )
    .Series(series =>
    {
         series.Column(d => d.invoices).Tooltip(tooltip => tooltip.Visible(true)).Name("Week Totals");                    
     // series.Column(model => ChartDataHelper.GetWeekTotals(model.Invoices)).Name("Week Totals"); // fails
      //series.Column(new double[] { 52000, 34000, 23000, 48000, 67000, 83000 }).Name("Unique visitors"); // works
    })
    .CategoryAxis(axis => axis
        .Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
        .MajorGridLines(lines => lines.Visible(false))
    )
    .ValueAxis(axis => axis
        .Numeric()
        .Line(line => line.Visible(false))
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0}")
    ))

Kendo UI MVC - How to bind dynamically data of type double[]

1 Answers