Populate Kendo UI StockChart with Model object

Question

Below is my code snippets , everything seems to be good to go even in my controller data in "data" variable is correct which means list of 51 elements . but when i run the code it throws the exception mentioned below

The model item passed into the dictionary is of type 'System.Collections.Generic.List`1[TelerikMvcApp1.Models.StockDataPoint]', but this dictionary requires a model item of type 'TelerikMvcApp1.Models.StockDataPoint'.

I know this exception is due to Usage of List , but why not and what is the solution

Model:

public class StockChart
{
    public List<StockDataPoint> responseData()
    {
        WebClient client = new WebClient();
        string url = "http://demos.telerik.com/kendo-ui/service/StockData";

        string EncryptedJson = client.DownloadString(url);

        string resultString_01 =  EncryptedJson.Substring(9, EncryptedJson.Length - 9); //remove the callback( from the jsonp
        string resultString_02 = resultString_01.Remove(resultString_01.Length - 1); //remove the ) from the same previous response string

        List<StockDataPoint> stockData = JsonConvert.DeserializeObject<List<StockDataPoint>>(resultString_02); // convert the json string to json response


            return stockData;
    }


}

public class StockDataPoint
{
    public DateTime Date { get; set; }

    public decimal Close { get; set; }

    public long Volume { get; set; }

    public decimal Open { get; set; }

    public decimal High { get; set; }

    public decimal Low { get; set; }

    public string Symbol { get; set; }
}

Controller:

public ActionResult Index()
        {
            var stock = new StockChart();
            List<StockDataPoint> data = stock.responseData();
            return View(data);
        }

View:

@model TelerikMvcApp1.Models.StockDataPoint
@{
    ViewBag.Title = "Home Page";
}

<div class="chart-wrapper">
    @(Html.Kendo().StockChart<TelerikMvcApp1.Models.StockDataPoint>()
        .Name("stockChart")
        .Title("The Boeing Company (NYSE:BA)")
        .DataSource(ds => ds.Read(read => read
            .Action("Index", "Home")
        ))
        .DateField("Date")
        .Panes(panes =>
        {
            panes.Add().Title("Value");
            panes.Add("volumePane").Title("Volume").Height(150);
        })
        .CategoryAxis(axis => axis.Pane("volumePane"))
        .ValueAxis(axis => axis.Numeric().Line(line => line.Visible(false)))
        .ValueAxis(axis => axis.Numeric("volumeAxis").Pane("volumePane").Visible(false))
        .Series(series =>
        {
            series.Candlestick(s => s.Open, s => s.High, s => s.Low, s => s.Close);
            series.Column(s => s.Volume).Axis("volumeAxis")
                    .Tooltip(tooltip => tooltip.Format("{0:C0}"));
        })
        .Navigator(nav => nav
            .Series(series =>
            {
                series.Area(s => s.Close);
            })
            .Select(
                DateTime.Parse("2009/02/05"),
                DateTime.Parse("2011/10/07")
            )
        )
        .HtmlAttributes(new { style = "height:600px;" })
    )
</div>

Answer 1

Well first of all you dont need this code at all in your View @model TelerikMvcApp1.Models.StockDataPoint since kendo will automatically ask your controller to provide data for the Chart in this part of code:

     DataSource(ds => ds.Read(read => read
                .Action("_BoeingStockData", "Financial") // first arg is the method name, 
//second one is the controller name without Controller postfix (Financial is for the FinancialController)

So the second thing , you need to write _BoeingStockData method, as example you could use this one:

[HttpPost]
public ActionResult _BoeingStockData()
{
    var db = new SampleEntities();

    return Json(
        from s in db.Stocks
        where s.Symbol == "BA"
        select new StockDataPoint
        {
            Date = s.Date,
            Open = s.Open,
            High = s.High,
            Low = s.Low,
            Close = s.Close,
            Volume = s.Volume
        }
    );
}