Kendo Chart with Filter Example

This article is an example of how to filter a Kendo Chart Component. The framework used is Kendo UI for jQuery. In this example, we learn a bunch of things. First, we will learn how to extend a Widget class to create our own custom widget. One reason why we create our own widget is when we would like to use it in our other projects. Second, triggering events so that our custom widget can handle the event. Lastly, utilizing the Kendo DataSource component to filter our Kendo Chart.

First off, we place our custom widget inside an immediately invoked function expression and pass in jQuery. We extend the base Kendo Widget class in the kendo.ui namespace. Next, we provide an init method. The element parameter is where we are initializing the widget to. The options are configuration values for our widget and are then merged to the base options. We add our custom UI code, _create and in order for the client code to get the filter when the Kendo Button is clicked, we trigger the attached event so that the client code can handle the event. Lastly, we add the widget to Kendo UI, plugin. Our widget is now available to use like all other Kendo UI widgets.

my-widget.js

In our HTML, we bind our array to a Kendo DataSource. We create our custom filter the same way we create other Kendo widgets and implement the code to handle the applyFilter event. And then we bind the dataSource to Kendo Chart.

kendo-chart-with-filter.html

This is how it looks like on initial load.

Kendo Chart with Filter - Initial Load

This is how it looks like filtered.

Kendo Chart with Filter - Filtered

There you have it. A quick and simple example of how to filter a Kendo Chart.