Grouped Local Data (multiple lines)

[Yogendra]

I'm having some issues showing multiple lines on the same grid. My objective is a date range in the X axis, a Percentage value in the Y axis and each line to represent a company. 

I put breakpoints on the datasource read and I can see that the data is being populated, but after it returns the JSON to the view, no data shows. 

Model: 

    public class CompanyMargin
    {
        public DateTime? ClosingDate { get; set; }
        public decimal? Margin { get; set; }
        public string Company { get; set; }
    }

 

Controller: (I have tried 2 ways.. passing directly from the controller itself as a list, and also creating a datasourcerequest action)

 public ActionResult MarginsAll()
        {
            List<CompanyMargin> lstCompanyMargin = new List<CompanyMargin>();
            var items = db.spGroupedMargin().ToList();
            foreach (var _item in items)
            {
                CompanyMargin companyMargin = new CompanyMargin();
                companyMargin.ClosingDate = _item.InvoiceDate;
                companyMargin.Company = _item.Client;
                companyMargin.Margin = _item.Margin;
                lstCompanyMargin.Add(companyMargin);
            }
            return View(lstCompanyMargin);
        }

        [HttpPost]
        public ActionResult _GroupedMargin([DataSourceRequest]DataSourceRequest request)
        {
            List<CompanyMargin> lstCompanyMargin = new List<CompanyMargin>();
            var items = db.spGroupedMargin().ToList();
            foreach (var _item in items)
            {
                CompanyMargin companyMargin = new CompanyMargin();
                companyMargin.ClosingDate = _item.InvoiceDate;
                companyMargin.Company = _item.Client;
                companyMargin.Margin = _item.Margin;
                lstCompanyMargin.Add(companyMargin);
            }
            DataSourceResult result = lstCompanyMargin.ToDataSourceResult(request, c => new CompanyMargin
            {
                Company = c.Company,
                Margin = c.Margin,
                ClosingDate = c.ClosingDate
            });
            return Json(result);
                }

 

View:

@(Html.Kendo().Chart<CDashboard.Models.CompanyMargin>()
    .Name("MarginChart")
    .Title("Company Margins")
     .DataSource(datasource => datasource
         .Read(read => read.Action("_GroupedMargin", "DashCharts"))
         .Group(group => group.Add(model => model.Company))
         .Sort(sort => sort.Add(model => model.ClosingDate).Ascending())
      )
     .Series(series =>
     {
         series.Line(model => model.Margin, categoryExpression: model => model.ClosingDate)
         .Name("#- group.value #");
     })
     .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
      )
      .ValueAxis(axis => axis.Numeric()
        .Labels( labels => labels
            .Format("{0}%")
            .Skip(2)
            )
      )
      .CategoryAxis(axis => axis
        .Date()
        .BaseUnit(ChartAxisBaseUnit.Days)
        )

    )

 

When the page loads, I show a blank chart, then the breakpoint on the _GroupedMargin action triggers. I step through that and I can see that it is indeed populated with data. But as soon as it passes back to the view, nothing shows. 

I would also like to question why I cannot find the kendo documentation solution on my local machine. While I had the trial I could open the Kendo.mvc.examples project to get a better understanding of the code. But it seems like once we purchased the product and installed the control panel, the local solution went away. The documentation online is very helpful, but when it offers to show the controller it just shows the generic controller and not the read actions or the models that I would need to see. Please help! 

[Yogendra]

I was able to fix this by passing the data to the viewmodel directly and commenting out the datasource.read line.