Drilldown in EJ2 JavaScript Treemap control

25 Oct 202313 minutes to read

Customize the header for treemap drilldown

You can add a header element as <div> and customize it to show the population of a particular country or continent on treemap drill-down.

To customize the header for treemap drill-down, follow the given steps:

Step 1:

Initialize the treemap and enable the drill-down option.

// Initialize the treemap control
var treemap = new ej.treemap.TreeMap({
    palette: ['#9999ff', '#CCFF99', '#FFFF99', '#FF9999', '#FF99FF', '#FFCC66'],
    enableDrillDown: true,
    format: 'n',
    useGroupingSeparator: true,
    dataSource: DrillDown,
    weightValuePath: 'Population',
    tooltipSettings: {
        visible: true,
        format: '${Name} : ${Population}'
    },
    leafItemSettings: {
        labelPath: 'Name',
        showLabels: false,
        labelStyle: { size: '0px' },
        border: { color: 'black', width: 0.5 }
    },
    levels: [
        { groupPath: 'Continent', fill: '#336699', border: { color: 'black', width: 0.5 } },
        { groupPath: 'States', fill: '#336699', border: { color: 'black', width: 0.5 } },
        { groupPath: 'Region', showHeader: false, fill: '#336699', border: { color: 'black', width: 0.5 } },
    ],
});

// Render the initialized treemap
treemap.appendTo('#container');

Step 2:

Show the population of a particular continent in the treemap loaded event. In this event, you can get the header element.

    loaded: function (args) {
        var header = document.getElementById('header');
        var population = 0;
        for (var i = 0; i < args.treemap.layout.renderItems[0]['parent'].Continent.length; i++) {
            population += +(args.treemap.layout.renderItems[0]['parent'].Continent[i]['data'].Population);
        }
        header.innerHTML = 'Continent - Population : ' + population
    }

Step 3:

Customize the population for drilled countries or states in the header element when drill-down the treemap. The drillEnd event will be triggered when treemap is drilled.

index.js

var treemap = new ej.treemap.TreeMap(
    {
        palette: ['#9999ff', '#CCFF99', '#FFFF99', '#FF9999', '#FF99FF', '#FFCC66'],
        enableDrillDown: true,
        format: 'n',
        useGroupingSeparator: true,
        dataSource: drillDown,
        weightValuePath: 'Population',
        tooltipSettings: {
            visible: true,
            format: '${Name} : ${Population}',
        },
        leafItemSettings: {
            labelPath: 'Name',
            showLabels: false,
            labelStyle: { size: '0px' },
            border: { color: 'black', width: 0.5 },
        },
        levels: [
            {
                groupPath: 'Continent',
                fill: '#336699',
                border: { color: 'black', width: 0.5 },
            },
            {
                groupPath: 'States',
                fill: '#336699',
                border: { color: 'black', width: 0.5 },
            },
            {
                groupPath: 'Region',
                showHeader: false,
                fill: '#336699',
                border: { color: 'black', width: 0.5 },
            },
        ],
        loaded: function (args) {
            var header = document.getElementById('header');
            var population = 0;
            for (var i = 0; i < args.treemap.layout.renderItems[0]['parent'].Continent.length; i++) {
                population +=
                    args.treemap.layout.renderItems[0]['parent'].Continent[i]['data']
                        .Population;
            }
            header.innerHTML = 'Continent - Population : ' + population;
        },
        drillEnd: function (args) {
            var header = document.getElementById('header');
            var layout = document.getElementById(
                'container_TreeMap_Squarified_Layout'
            );
            var population = 0;
            if (args.treemap.layout.renderItems[0]['isDrilled']) {
                for (var i = 0; i < args.treemap.layout.renderItems.length; i++) {
                    population += args.treemap.layout.renderItems[i]['data'].Population;
                }
                header.innerHTML =
                    layout.children[0].children[1].innerHTML.split(']')[1] +
                    ' - ' +
                    population;
            } else if (args.treemap.layout.renderItems[0]['parent'].Continent) {
                for (
                    var i = 0;
                    i < args.treemap.layout.renderItems[0]['parent'].Continent.length;
                    i++
                ) {
                    population +=
                        args.treemap.layout.renderItems[0]['parent'].Continent[i]['data']
                            .Population;
                }
                header.innerHTML = 'Continent - Population : ' + population;
            } else {
                population = args.treemap.layout.renderItems[0]['data'].Population;
                header.innerHTML =
                    layout.children[0].children[1].innerHTML.split(']')[1] +
                    ' - Population : ' +
                    population;
            }
        },
    },
    '#container'
);

index.html

<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 for Treemap </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for treemap UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <script src="datasource.js"></script>
    <script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id="header"></div>
    <div id="container">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>