jQuery Bar Charts Binding to Grouped Data

The jQuery Bar Chart can be bound to grouped data by using the Kendo UI DataSource component as a mediator. Grouped data is data that is sorted in categories, classified in a specific way, or otherwise grouped based on given criteria. Grouped data represents a convenient approach for summarizing or analyzing the data.

To bind the Bar Chart to the DataSource:

1. Bind the chart to a Kendo UI DataSource instance.
2. Set the DataSource.group.field property to the name of the column in the underlying data which will be the criteria for grouping the series items into series (symbol in this example).
3. Bind the series.field setting to the close field in the underlying data source.
4. Bind the categoryAxis.field property to the 'date' field in the source.

The result will be visible in as many series as the number of the distinct values in the column, that is, the DataSource.group.field. For each value there will be chart series in the Chart.

In the current example, the data for the Chart is defined through 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.

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.