Edit this page

Ajax Binding

Getting Started

When configured for Ajax binding, the Kendo UI Chart for JSP makes Ajax requests to populate its series.

Configuration

To configure the Kendo Chart for Ajax binding, follow the steps below (using the Spring MVC framework).

Step 1 Add a new action method which will return data to populate the Chart.

Example
    @RequestMapping(value = "/remote-data/read", method = RequestMethod.POST)
    public @ResponseBody List<ElectricityProduction> read() {
        List<ElectricityProduction> data =
            ChartDataRepository.SpainElectricityProduction();
    }

Step 2 Return the data as JSON.

Example
    @RequestMapping(value = "/remote-data/read", method = RequestMethod.POST)
    public @ResponseBody List<ElectricityProduction> read() {
        List<ElectricityProduction> data =
            ChartDataRepository.SpainElectricityProduction();
        return data;
    }

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

Example
    <kendo:chart name="chart">
         <kendo:dataSource>
             <kendo:dataSource-sort>
                 <kendo:dataSource-sortItem field="year" dir="asc" />
             </kendo:dataSource-sort>
         <kendo:dataSource-transport>
                 <kendo:dataSource-transport-read url="${readUrl}" dataType="json" type="POST" contentType="application/json" />
            </kendo:dataSource-transport>
           </kendo:dataSource>
         <kendo:chart-series>
            <kendo:chart-seriesItem type="column" field="nuclear" name="Nuclear" />
            <kendo:chart-seriesItem type="column" field="hydro" name="Hydro" />
            <kendo:chart-seriesItem type="column" field="wind" name="Wind" />
         </kendo:chart-series>
         <kendo:chart-categoryAxis>
            <kendo:chart-categoryAxisItem field="year" />
         </kendo:chart-categoryAxis>
    </kendo:chart>

See Also

Other articles on Telerik UI for JSP and on the AutoComplete:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve the information

close
Dummy