Next
Update
Prev

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

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

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;
  }

  // It sets the data of the current drill-down depth.
  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.