Data Binding

The StockChart enables you to populate it with data by using server and Ajax data binding.

Server Binding

The server binding binds the StockChart to a supplied model.

To configure the Chart for server binding:

  1. Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET MVC.
  2. Create a new action method and pass the data list as the model.

    public ActionResult Index()
    {
        return View(ChartDataRepository.BoeingStockData());
    }
    
  3. Make your view strongly typed.

        <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
            Inherits="System.Web.Mvc.ViewPage<IEnumerable<Kendo.Mvc.Examples.Models.StockDataPoint>>" %>
    
        @model IEnumerable<Kendo.Mvc.Examples.Models.StockDataPoint>
    
  4. Add a server-bound StockChart.

        <%: Html.Kendo().StockChart(Model)
            .Name("stockChart")
            .Title("The Boeing Company (NYSE:BA)")
            .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(Model)
            .Name("stockChart")
            .Title("The Boeing Company (NYSE:BA)")
            .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);
                })
            )
        )
    

Ajax Binding

The Ajax binding makes Ajax requests to get the data for the StockChart.

To configure the StockChart for Ajax binding:

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

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

  1. Return the data as JSON.

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

  2. 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")
        )
    
  3. 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