Event HandlingDrill-Down to Details in Pie Chart

VIEW MORE FEATURES
VIEW HTML
EDIT ON CODEPEN
KoolChart provides event handlers that allow users to handle various events such as mouse clicks, mouse overs, and chart rendering complete. Users can write their own JavaScript functions to handle events.

In this example, when the user clicks on a slice in the pie chart the event handling function drills down to the details of the slice.
<Pie2DChart showDataTips="true" itemClickJsFunction="itemClick" buttonMode="true" explodable="false">

function itemClick (seriesId, displayText, index, data, values) {
var depth;
depth = document.getElementById("chart1").getDrillDownDepth();

if (depth == 2) {
alert("No data has been found.");
return;
}

document.getElementById("chart1").setDataDrilldown(makeData(depth));
}

function makeData (depth) {
var i = 0, n, arr = [], obj,
categoryDatas = [
["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
];

n = categoryDatas[depth].length;

for (i ; i < n ; i += 1) {
obj = {};
obj.Month = categoryDatas[depth][i];
obj.Profit = Math.round(Math.random() * 1500);
arr.push(obj);
}
return arr;
}