One of the fascinating things about being an evangelist is that, everyday I get to hear a new problem that people are trying to solve. It always keeps me on my toes as it gives me an opportunity to dig into our documentation once again and unearth the code necessary to solve the problem. In this blog post I will talk about one such problem a customer sent us. They wanted to know if Kendo UI DataViz charts support drill down or not. Out of the box Kendo UI DataViz does not have the capability in built but we provide events on the chart which will help you to achieve this functionality easily. So this blog post is all about achieving drill down functionality using Kendo UI DataViz chart. So if you have such a situation in your project, you may want to sit back and follow rest of the post.
Step 1 – Define the markup:
As you know in order to work with Kendo UI DataViz you will need to first add reference to Kendo UI DataViz CSS and then add reference to Kendo UI DataViz Theme CSS. Theme can be anything for e.g. black, metro, blue opal etc. Then add a reference to Jquery and Kendo UI DataViz JavaScript. Next define a div and give it a id of “chart”.
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.black.min.css"> <body> <div id="chart" ></div> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script> <script> <!-- chart draw logic here --> </script> </body>
Step 2 – Prepare Data:
For the sake of this blog post i am going to fake some data about browsers market share. So initially i will show column chart for major browsers. Then on clicking each column i should be able to drill down into its specific data. I will create my data as a JavaScript array and use them for binding to chart. Here are my data array which i will use while binding to chart:
<script>
var chartInitialData=[
{category:"MSIE",value:55.11},
{category:"Firefox",value:21.63},
{category:"Chrome",value:11.94},
{category:"Safari",value:7.15},
{category:"Opera",value:2.14},
];
var 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},
];
</script>
As you can see, I have an initial data to bind to the chart. And also the drill down data. For the sake of simplicity i have only shown drill down data for one of the columns. At the end of this post i will give link to the code which will have drill down data for all the columns of the chart.
Step 3 – Initialize the Chart:
Now we are ready to initialize the chart and bind the initial data to it. Here is the code snippet for initializing the chart:
$(document).ready(function(){
$("#chart").kendoChart({
theme:"Black",
title: { text: "Browser market share, March, 2014"},
dataSource:{ data:chartInitialData },
series: [{
type:"column",
field:"value",
categoryField:"category",
labels:{
visible:true,
template:"${value}%"
}
}],
tooltip:{
visible:true,
template:"<center>${category}: <b>${value}% market share</b><br/>Click to see ${category} versions</center>"
},
});
})
Let me go over the code once. I access an element with id “chart” and then initialize Kendo Chart on that element. I set the theme to Black. Then i provide a title to the chart. Next comes the data source and i create a Kendo.data.DataSource object and provide the value of chartInitialData to data property. Then I set the series as a column chart type. Next I set the value field and category field of the chart to corresponding column name from the data source. I also set the labels to be visible on top of each column. Lastly I set the tooltip to a custom template. Now if we run the code this is what we see:
Drill Down Chart Initial Look
Step 4 – Handle Series Click:
Now that we have our chart initialized and see that the data is getting bound correctly, next step is to handle the series click. Series Click is an event fired when the user clicks on any columns in the chart. Chart API exposes a method called setDataSource(). So in order to achieve a drill down, handle the series click event and set a new data source to the chart. What this does is, it will repaint the chart area and provides the drill down effect. So here is the code snippet for the seriesClick event:
seriesClick: function(e)
{
var categorySelected = e.category;
var chart = $("#chart").data("kendoChart");
if(categorySelected === "MSIE")
{
chart.setDataSource(new kendo.data.DataSource({data:msieData}));
}
else if(categorySelected === "Firefox")
{
chart.setDataSource(new kendo.data.DataSource({data:ffData}));
}
else if(categorySelected === "Chrome")
{
chart.setDataSource(new kendo.data.DataSource({data:chromeData}));
}
else if(categorySelected === "Safari")
{
chart.setDataSource(new kendo.data.DataSource({data:safariData}));
}
else if(categorySelected === "Opera")
{
chart.setDataSource(new kendo.data.DataSource({data:operaData}));
}
else
{
//not handling the child level drill down - setting the chart back to original data source
chart.setDataSource(new kendo.data.DataSource({data:chartInitialData}));
}
}
And thats all it is there to create a drill down with Kendo UI DataViz.
Here is a link to the source code of this demo: http://trykendoui.telerik.com/@kashyapa/eCEP/3.
The demo code is done using our Kendo UI Dojo. When you navigate to the demo page, left hand side will have the source code and right hand side will show the output. You will need to click on the Run button on the page to see the output.
Hope this demo helps somebody who want to achieve the same scenario.
Till next time – Happy Coding.
Helping Ninja Technologists 