How to do drill down on Kendo UI Chart with Angular JS?

Published on Author Ranjithilaga

I will be plotting a bar graph with 1 series which contains different categories. Each category when clicked will drill down to reveal more information.

Kendo UI Chart - Drill Down using Angular JS 1.X

Kendo UI Chart – Drill Down using Angular JS 1.X

Declaring Kendo UI Chart:

Lets take a look at the code first. I will explain the code step by step.

<div id="example" ng-app="KendoDemos">
  <div ng-controller="MyCtrl">
    <div kendo-chart="kChart"
  //code ...
  • First we create a div and designate that as the ng application
  • Then we have an inner div which will house the chart and we provide our ng controller to this div. i have named my controller as “MyCtrl”.
  • Then we create a div and we use the Kendo UI Chart directive “kendo-chart” on it. This directive will convert the div to Kendo UI Chart at run time.
  • We then set series default of the chart, series that will be used for the current chart, the data source to look up on the scope and the event handler reference on the scope whenever a series is clicked

All we have done so far is to just set up the markup for the chart. Next up we will see the code that will power the grid.

Angular Controller Code for the Kendo UI Chart:

First up we will create the angular module and add our angular module to it. Here is the code snippet:

      			 .controller("MyCtrl", function($scope){
            //code ... 

Next i will define the data required for the chart on the scope as variables. I will use an initial chart data and then the data for each drill down category. Here is the code snippet:

$scope.initialData = [
$scope.msieData = [
    {category:"MSIE 6.0",value:10.85},
    {category:"MSIE 7.0",value:7.35},
    {category:"MSIE 8.0",value:33.06},
    {category:"MSIE 9.0",value:2.81},

//other category data

Next we create a data source for the chart. We use Kendo UI DataSource as the chart data source. We will provide the initial chart data array that we have created as the initial data for the chart. Note: in this demo i am using static data to showcase the drill down example. But the Kendo UI Data Source can be bound to a remote end point to fetch the data.

$scope.chartDataSource = new{

Now if you run the application you will get the chart initialized with the initial data we have provided. Here is the snap shot of the chart output:

Kendo UI Chart with Angular

Kendo UI Chart with Angular


Handling Series Click on the Kendo UI Chart:

In the Kendo UI Chart declaration we have already hooked up the series click event to be handled by a event handler. So all that is left now is to add the function which will do that. Here is the code snippet which will handle the series click event of the chart:

 $scope.onSeriesClick = function(e){
    var categorySelected = e.category;
    if(categorySelected === "MSIE")
    else if(categorySelected ===  "Firefox")
    else if(categorySelected ===  "Chrome")
    else if(categorySelected ===  "Safari")
    else if(categorySelected ===  "Opera")

All we are doing is, when a series category is clicked we capture the category. Then get the drill down data for that category and set it to the Kendo UI data source we have created on the scope. The chart will be automatically re-rendered as soon as the data is changed. So we have in a way achieved the drill down behavior on the chart itself. Its as easy as that.

This blog post was all about showcasing how easy it is to handle a drill down in Kendo UI Chart if you are using Angular JS as your UI framework. The complete solution is available as Kendo UI DOJO here: