Ajax Binding

When configured for an Ajax binding, the Kendo UI StockChart for ASP.NET MVC makes Ajax requests to populate its series.

Configuration

Below are steps for you to follow when configuring the Kendo UI StockChart for ASP.NET MVC for Ajax binding.

Add a New Action Method

Add a new action method which returns data to populate the StockChart.

Example
public partial class HomeController : Controller
{
    public ActionResult _BoeingStockData()
    {
    }
}

Return Data

Return the data as JSON.

Example
public ActionResult InternetUsers_Read()
{
    return Json(ChartDataRepository.BoeingStockData());
}

Configure the Chart

In the view, configure the Chart to use the action method created in the previous steps.

    <%: Html.Kendo().StockChart<Kendo.Mvc.Examples.Models.StockDataPoint>()
        .Name("stockChart")
        .Title("The Boeing Company (NYSE:BA)")
        .DataSource(ds => ds.Read(read => read
            .Action("_BoeingStockData", "Home")
        ))
        .DateField("Date")
    %>
    @(Html.Kendo().StockChart<Kendo.Mvc.Examples.Models.StockDataPoint>()
        .Name("stockChart")
        .Title("The Boeing Company (NYSE:BA)")
        .DataSource(ds => ds.Read(read => read
            .Action("_BoeingStockData", "Home")
        ))
        .DateField("Date")
    )

Create the Data Series

Create the main and navigator data series.

    <%: Html.Kendo().StockChart<Kendo.Mvc.Examples.Models.StockDataPoint>()
        .Name("stockChart")
        .Title("The Boeing Company (NYSE:BA)")
        .DataSource(ds => ds.Read(read => read
            .Action("_BoeingStockData", "Home")
        ))
        .DateField("Date")
        .Series(series => {
            series.Candlestick(s => s.Open, s => s.High, s => s.Low, s => s.Close);
        })
        .Navigator(nav => nav
            .Series(series => {
                series.Line(s => s.Volume);
            })
        )
    %>
    @(Html.Kendo().StockChart<Kendo.Mvc.Examples.Models.StockDataPoint>()
        .Name("stockChart")
        .Title("The Boeing Company (NYSE:BA)")
        .DataSource(ds => ds.Read(read => read
            .Action("_BoeingStockData", "Home")
        ))
        .DateField("Date")
        .Series(series => {
            series.Candlestick(s => s.Open, s => s.High, s => s.Low, s => s.Close);
        })
        .Navigator(nav => nav
            .Series(series => {
                series.Line(s => s.Volume);
            })
        )
    )

See Also

In this article
Not finding the help you need? Improve this article