Next
Update
Prev
Default

This sample TreeMap chart demonstrates how to drill down to children data. Try to mouse click on a box in the chart, then you will see the children data of the clicked region. You can go back to the parent map by clicking on the back button at the top left of the chart.

...
  <TreeMapChart ... itemClickJsFunction="dataChange" >
    <series>
      <TreeMapSeries  ... >
        ...
      </TreeMapSeries>
    </series>
    ...
  </TreeMapChart>
...

function dataChange(seriesId, displayName, index, data, values) {
  var chart = document.getElementById("chart1");

  // Only the top-level can be drilled down.
  if(chart.getDrillDownDepth() < 1)
    chart.setDataDrilldown(window[data.dataField]);
}

© 2017 KoolChart. All rights reserved.