Next
Update
Prev

This sample demonstrates how to drill down on the chart when the user clicks on the slice in the pie chart. Try to click on the slice in the chart to see how it works. You can back to the parent chart by clicking on the arrow button at the top left.

...
<Pie2DChart ... itemClickJsFunction="itemClick" >
...
</Pie2DChart>
...

function itemClick(seriesId, displayText, index, data, values) {
  var data, depth;

  depth = document.getElementById("chart1").getDrillDownDepth();

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

  document.getElementById("chart1").setDataDrilldown(makeData(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;
}

© 2017 KoolChart. All rights reserved.