jQuery Bar Charts Binding to Local Data

The jQuery Bar Chart supports local data binding and you can display local-storage data in the component. To implement local data binding, you only need to supply an array of JavaScript objects or JSON through the dataSource data property of the Area Chart or utilize the Kendo UI DataSource as a mediator between the jQuery Area Chart and the underlying data.

In the current example, the data for the chart is defined with a JSON array and assigned to the chart by using the dataSource data attribute. Thus, the Chart fetches the data and displays its series and categoryAxis values by setting their field properties to match the relevant data items attribute names in the source.

To instantiate a jQuery Bar Chart, you need to specify an empty div with an id on the page, select this div with a jQuery selector and invoke the kendoChart() function. As a result, the Chart is registered as a standard jQuery plugin.

This Bar Chart example is part of a unique collection of hundreds of jQuery demos, with which you can see all Kendo UI for jQuery components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Kendo UI for jQuery Dojo or ThemeBuilder.