Edit this page

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.

Example

         <%: 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.

Example

        <%: 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