Kendo UI stock chart with MVC

Question

I have a model like so:

public class StockHistoryChart
{
    public IEnumerable<IStockHistory> Series { get; set; }
    public Stock Stock { get; set; }
}

public class StockHistory:IStockHistory
{
    public virtual Stock Stock { get; set; }
    public virtual Guid StockHistoryId { get; set; }
    public virtual DateTime Date { get; set; }
    public virtual decimal Open { get; set; }
    public virtual decimal Close { get; set; }
    public virtual decimal Volume { get; set; }
    public virtual decimal DayLow { get; set; }
    public virtual decimal DayHigh { get; set; }
}

I can populate this model just fine, but when I try to render the model using the Kendo UI, I run into problems. The demo on the website does things differently, but I am trying to load this as an ajax call using a partial view, so I am trying something like this:

@(Html.Kendo().StockChart<StockHistoryChart>()
    .Name(string.Format("stock-chart-{0}", Html.CreateSafeId(Model.Stock.Symbol)))
    .Title(string.Format("{0} ({1}) - Currently {2:C}/ share", Model.Stock.CompanyName, Model.Stock.Symbol, Model.Stock.ValuePerShare))
    .DataSource(ds => ds.Model(model => model.Field(m => m.Series)))
    .DateField("Date")
    .Series(s => s.Candlestick(Model.Series.Select(x => new { x.Open, High = x.DayHigh, Low = x.DayLow, x.Close })))
    .Navigator(nav => nav.Series(series => series.Area(s => s.Series).Field("Close") ))
    .CategoryAxis(ca => ca.Date()
        .Notes(n => n.Data(d =>
            {
                var date = new DateTime(DateTime.Today.Year, 1, 1);
                var min = Model.Series.Min(x => x.Date);
                var span = date.Year - min.Year;
                for (var year = date; year.Year < span; year = year.AddYears(-1))
                {
                    var y = year;
                    d.Add()
                    .Value(year)
                    .Label(l => l.Text(string.Format("{0:yyyy}", y)));
                }
            }))
        )
    )

...the chart will render, but no data is showing up. What do I need to do to get this to work? I cannot seem to figure this out by the example, and the documentation is awfully abstract.

Answer 1

You've defined the Kendo DataModel (link attached), but you haven't provided a data source. You will need either a read action in the datasource or, if you're passing the model into the view, then you will need to define the stock chart like this:

@(Html.Kendo().StockChart(Model)
...
)