JavaScript Chart - Event Handling Drill-Down to Details in Pie Chart

VIEW MORE FEATURES
SAVE
VIEW HTML
EDIT ON CODEPEN
KoolChart's JavaScript charting library 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 JavaScript chart 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;
}