Data Binding

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

Server Binding

The server binding binds the Chart to a supplied model.

To configure the Chart for server binding to the InternetUsers list:

  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 InternetUsers list as the model.

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

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

        <%: Html.Kendo().Chart(Model) // The Chart will be bound to the Model which is the InternetUsers list.
                .Name("internetUsersChart") // The name of the Chart is mandatory. It specifies the "id" attribute of the widget.
                .Title("Internet Users")
                .Series(series => {
                    series.Bar(model => model.Value) // Create a Bar Chart series bound to the "Value" property.
                            .Name("United States");
                })
                .CategoryAxis(axis => axis
                    .Categories(model => model.Year)
                )
        %>
    
        @(Html.Kendo().Chart(Model) // The Chart will be bound to the Model which is the InternetUsers list.
                .Name("internetUsersChart") // The name of the Chart is mandatory. It specifies the "id" attribute of the widget.
                .Title("Internet Users")
                .Series(series => {
                    series.Bar(model => model.Value) // Create a Bar Chart series that is bound to the "Value" property.
                        .Name("United States");
                })
                .CategoryAxis(axis => axis
                    .Categories(model => model.Year)
                )
        )
    

Ajax Binding

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

To configure the Chart for Ajax binding:

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

    public ActionResult InternetUsers_Read()
    {
        var data = ChartDataRepository.InternetUsers();
    }
    
  2. Return the data as JSON.

    public ActionResult InternetUsers_Read()
    {
        var data = ChartDataRepository.InternetUsers();
        return Json(data);
    }
    
  3. In the view, configure the Chart to use the action method created in the previous steps.

    ```ASPX
    
            <%: Html.Kendo().Chart<MvcApplication1.Models.InternetUsers>()
                    .Name("internetUsersChart")
                    .DataSource(dataSource => dataSource
                        .Read(read => read.Action("InternetUsers_Read", "Home")) // Specify the action method and controller names.
                    )
                    .Series(series => {
                        series.Bar(d => d.Value)
                              .Name("United States");
                    })
                    .CategoryAxis(axis => axis
                        .Categories(model => model.Year)
                    )
            %>
    ```
    ```Razor
    
            @(Html.Kendo().Chart<MvcApplication1.Models.InternetUsers>()
                  .Name("internetUsersChart")
                  .DataSource(dataSource => dataSource
                      .Read(read => read.Action("InternetUsers_Read", "Home")) // Specify the action method and controller names.
                  )
                  .Series(series => {
                      series.Bar(d => d.Value)
                            .Name("United States");
                  })
                  .CategoryAxis(axis => axis
                      .Categories(model => model.Year)
                  )
            )
    ```
    

See Also

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