Edit this page

Ajax Binding

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

Configuration

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

Add a New Action Method

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

Example
    public ActionResult InternetUsers_Read()
    {
        var data = ChartDataRepository.InternetUsers();
    }

Return Data

Return the data as JSON.

Example
    public ActionResult InternetUsers_Read()
    {
        var data = ChartDataRepository.InternetUsers();
        return Json(data);
    }

Configure the Chart

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

Example

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

        @(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