In this tutorial, learn how to populate a Kendo UI Chart with data bound to a Kendo UI Grid, and add new capabilities to your apps.
Combining some of the most used widgets from the Kendo UI suite is a common requirement, and the possible integrations and requirements are endless. Maybe it's rendering a Kendo UI Chart within a cell of each row for displaying a collection from the data item; populating external Chart with the data from the selected row in the Grid or from the grouped data, using the aggregates for a specific field; creating multiple series from each data item or from different columns.
As technical support officers, we are often challenged with real-life scenarios for integrating multiple widgets from the Kendo UI suite. There are always some great ideas coming from the developers using the widgets in ways that none of us considered as a use-case (like using the selected/hovered series in the Chart for filtering the Grid). Like everything else in the developers’ world, there is no product that could do everything out-of-the-box, and with every new client there is a new requirement that will require customization. This applies for integrating Chart with Grid as well.
It should be mentioned that due to the difference in how both widgets are handling the data, it is highly recommended to create the Chart dynamically, based on the Grid data and the requirement, and to always re-initialize the Chart when needed (by using its setOptions method). This approach gives us the freedom and flexibility to easily manipulate and configure the data.
Now, let's start with the implementation. For both examples, we will be using the following starting point:
Imagine that we have the following data structure:
Such data could be easily visualized in Kendo UI Line Chart, where the series will be created for each year and the months will be used for categories.
Once we know which field from the data items will be used in the series of the Chart, we can initialize the widgets. We will be using dummy data for the example and the records will contain information for a few months only (for brevity):
The above will render and populate the Grid with the data, but the Chart will be empty. Since our Grid will be editable, we need to ensure that the Chart will be updated after each change in the dataSource. The perfect event for updating the Chart data in this way is the “change” event of the dataSource:
And here is where the magic begins. Within the updateChart function, where we'll update the Chart, we will retrieve each dataItem from the current view of the Grid's dataSource and we will create all series based on the updated data. The series will contain a data collection with the values from each month, and the Chart will use the “categories” from the “categoryAxis” array to match the values accordingly. When we create the new series with the new data, we can modify the options of the Chart and call its setOptions method for re-initializing the widget:
The entire code of the example can be tested in the following dojo:
For this example, we will bind the Grid to products collection and will group the data by the product's category. We will configure the average aggregate for the unit price and will have an average for each category as a result. The grouped data and the aggregates will then be used to populate a Pie Chart.
Due to the custom editor for the Category field and the aggregates, the configuration of the Grid will be fairly complex:
For the initial configuration of the Chart we'll set only the known variables, and leave the series data to be populated after the groups of the Grid are created:
Once again, as in the first example, we will update the Chart within the “change” event of the dataSource:
And here is how we populate the data for the series by using the group value (the CategoryName of the group) and the average aggregate as a value:
With a good understanding of the Grid and Chart widgets (or with a little help from our technical support officers team), you can enhance your apps in a number of ways by using the data from the Grid and visualizing it in the Chart. We'd note though that it is important to understand the data structure as well in order to create the series correctly.
Try out the examples in the dojos above and let us know what you think. Happy coding!
Konstantin Dikov is a Tech Support Engineer on the Kendo UI Team, and has been working with Kendo UI and Telerik UI products since 2013. He is passionate about music, literature, drawing and breakthrough technologies.
Subscribe to be the first to get our expert-written articles and tutorials for developers!