Search results

How To

Customize the header for treemap drilldown

Yon can add a header element as

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.

 <ejs-treemap id="container" weightValuePath="Population" format="n" palette="palette"
                     useGroupingSeparator="true" enableDrillDown="true">
            <e-treemap-leafitemsettings labelPath="Name" showLabels="false">
            </e-treemap-leafitemsettings>
            <e-treemap-levels>
                <e-treemap-level groupPath="Continent" fill="#336699" border="border">
                </e-treemap-level>
                <e-treemap-level groupPath="Sates" fill="#336699" border="border">
                </e-treemap-level>
                <e-treemap-level groupPath="Region" fill="#336699" border="border">
                </e-treemap-level>
            </e-treemap-levels>
</ejs-treemap>

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: ILoadedEventArgs) {
        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.

tagHelper
header.cs
@{ 
    var palette = new string[] { "#9999ff", "#CCFF99", "#FFFF99", "#FF9999", "#FF99FF", "#FFCC66" };
    var border = new TreeMapBorder { Color = "black", Width = 0.5 };
}
@using Syncfusion.EJ2;
<div>
	<div id="header" style="background-color: #179bd7"></div>
        <ejs-treemap id="container" load="load" loaded="loaded" drillEnd="drillEnd" weightValuePath="Population" format="n" palette="palette"
                     useGroupingSeparator="true" enableDrillDown="true">
            <e-treemap-leafitemsettings labelPath="Name" showLabels="false">
            </e-treemap-leafitemsettings>      
            <e-treemap-levels>
                <e-treemap-level groupPath="Continent" fill="#336699" border="border">
                </e-treemap-level>
                <e-treemap-level groupPath="Sates" fill="#336699" border="border">
                </e-treemap-level>
                <e-treemap-level groupPath="Region" fill="#336699" border="border">
                </e-treemap-level>
            </e-treemap-levels>
</ejs-treemap>
    </div>      
<script>
    function loaded(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
    }
    function drillEnd(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;
        }
    }
    function load(args) {
        var data = [
            {
                Continent: [
                    {
                        Name: "Africa", Population: 1216130000, States: [
                            {
                                Name: "Eastern Africa", Population: 410637987, Region: [
                                    { Name: "Ethiopia", Population: 107534882 },
                                    { Name: "Tanzania", Population: 59091392 },
                                    { Name: "Kenya", Population: 50950879 },
                                    { Name: "Uganda", Population: 44270563 },
                                    { Name: "Mozambique", Population: 30528673 },
                                    { Name: "Madagascar", Population: 26262810 },
                                    { Name: "Malawi", Population: 19164728 },
                                    { Name: "Zambia", Population: 17609178 },
                                    { Name: "Zimbabwe", Population: 16913261 },
                                    { Name: "Somalia", Population: 15181925 },
                                    { Name: "South, Sudan", Population: 12919053 },
                                    { Name: "Rwanda", Population: 12501156 },
                                    { Name: "Burundi", Population: 11216450 },
                                    { Name: "Eritrea", Population: 5187948 },
                                    { Name: "Mauritius", Population: 1268315 },
                                    { Name: "Djibouti", Population: 971408 },
                                    { Name: "Réunion", Population: 883247 },
                                    { Name: "Comoros", Population: 832347 },
                                    { Name: "Mayotte", Population: 259682 },
                                    { Name: "Seychelles", Population: 95235 },
                                ]
                            },
                            {
                                Name: "Middle Africa", Population: 158562976, Region: [
                                    { Name: "Democratic, Republic of the Congo", Population: 84004989 },
                                    { Name: "Angola", Population: 30774205 },
                                    { Name: "Cameroon", Population: 24678234 },
                                    { Name: "Chad", Population: 15353184 },
                                    { Name: "Congo", Population: 5399895 },
                                    { Name: "Central African, Republic", Population: 4737423 },
                                    { Name: "Gabon", Population: 2067561 },
                                    { Name: "Equatorial Guinea", Population: 1313894 },
                                    { Name: "Sao Tome and Principe", Population: 208818 },
                                ]
                            },
                            {
                                Name: "Northern Africa", Population: 229385603, Region: [
                                    { Name: "Egypt", Population: 99375741 },
                                    { Name: "Algeria", Population: 42008054 },
                                    { Name: "Sudan", Population: 41511526 },
                                    { Name: "Morocco", Population: 36191805 },
                                    { Name: "Tunisia", Population: 11659174 },
                                    { Name: "Libya", Population: 6470956 },
                                    { Name: "Western, Sahara", Population: 567421 },
                                ]
                            },
                            {
                                Name: "Southern Africa", Population: 64292365, Region: [
                                    { Name: "South Africa", Population: 57398421 },
                                    { Name: "Namibia", Population: 2587801 },
                                    { Name: "Botswana", Population: 2333201 },
                                    { Name: "Lesotho", Population: 2263010 },
                                    { Name: "Swaziland", Population: 1391385 },
                                ]
                            },
                            {
                                Name: "Western Africa", Population: 362201579, Region: [
                                    { Name: "Nigeria", Population: 195875237 },
                                    { Name: "Ghana", Population: 29463643 },
                                    { Name: "Côte d'Ivoire", Population: 24905843 },
                                    { Name: "Niger", Population: 22311375 },
                                    { Name: "Burkina Faso", Population: 19751651 },
                                    { Name: "Mali", Population: 19107706 },
                                    { Name: "Senegal", Population: 16294270 },
                                    { Name: "Guinea", Population: 13052608 },
                                    { Name: "Benin", Population: 11485674 },
                                    { Name: "Togo", Population: 7990926 },
                                    { Name: "Sierra Leone", Population: 7719729 },
                                    { Name: "Liberia", Population: 4853516 },
                                    { Name: "Mauritania", Population: 4540068 },
                                    { Name: "Gambia", Population: 2163765 },
                                    { Name: "Guinea-Bissau", Population: 1907268 },
                                    { Name: "Cabo Verde", Population: 553335 },
                                    { Name: "Saint Helena", Population: 4074 },
                                ]
                            },
                        ]
                    }]
            },



            {
                Continent: [
                    {
                        Name: "Asia", Population: 4436224000, States: [
                            {
                                Name: "Central Asia", Population: 69787760, Region: [
                                    { Name: "Uzbekistan", Population: 32364996 },
                                    { Name: "Kazakhstan", Population: 18403860 },
                                    { Name: "Tajikistan", Population: 9107211 },
                                    { Name: "Kyrgyzstan", Population: 6132932 },
                                    { Name: "Turkmenistan", Population: 5851466 },
                                ]
                            },
                            {
                                Name: "Eastern Asia", Population: 1641908531, Region: [
                                    { Name: "China", Population: 1415045928 },
                                    { Name: "Japan", Population: 127185332 },
                                    { Name: "South Korea", Population: 51164435 },
                                    { Name: "North Korea", Population: 25610672 },
                                    { Name: "Taiwan", Population: 23694089 },
                                    { Name: "Hong Kong", Population: 7428887 },
                                    { Name: "Mongolia", Population: 3121772 },
                                    { Name: "Macao", Population: 632418 },
                                ]
                            },
                            {
                                Name: "Southeastern Asia", Population: 641775797, Region: [
                                    { Name: "Indonesia", Population: 266794980 },
                                    { Name: "Philippines", Population: 106512074 },
                                    { Name: "Viet Nam", Population: 96491146 },
                                    { Name: "Thailand", Population: 69183173 },
                                    { Name: "Myanmar", Population: 53855735 },
                                    { Name: "Malaysia", Population: 32042458 },
                                    { Name: "Cambodia", Population: 16245729 },
                                    { Name: "Laos", Population: 6961210 },
                                    { Name: "Singapore", Population: 5791901 },
                                    { Name: "Timor-Leste", Population: 1324094 },
                                    { Name: "Brunei Darussalam", Population: 434076 },
                                ]
                            },
                            {
                                Name: "Southern Asia", Population: 1846266634, Region: [
                                    { Name: "India", Population: 1354051854 },
                                    { Name: "Pakistan", Population: 200813818 },
                                    { Name: "Bangladesh", Population: 166368149 },
                                    { Name: "Iran", Population: 82011735 },
                                    { Name: "Afghanistan", Population: 36373176 },
                                    { Name: "Nepal", Population: 29624035 },
                                    { Name: "Sri Lanka", Population: 20950041 },
                                    { Name: "Bhutan", Population: 817054 },
                                    { Name: "Maldives", Population: 444259 },
                                ]
                            },
                            {
                                Name: "Western Asia", Population: 262938009, Region: [
                                    { Name: "Turkey", Population: 81916871 },
                                    { Name: "Iraq", Population: 39339753 },
                                    { Name: "Saudi Arabia", Population: 33554343 },
                                    { Name: "Yemen", Population: 28915284 },
                                    { Name: "Syria", Population: 18284407 },
                                    { Name: "Azerbaijan", Population: 9923914 },
                                    { Name: "Jordan", Population: 9903802 },
                                    { Name: "United Arab Emirates", Population: 9541615 },
                                    { Name: "Israel", Population: 8452841 },
                                    { Name: "Lebanon", Population: 6093509 },
                                    { Name: "State of Palestine", Population: 5052776 },
                                    { Name: "Oman", Population: 4829946 },
                                    { Name: "Kuwait", Population: 4197128 },
                                    { Name: "Georgia", Population: 3907131 },
                                    { Name: "Armenia", Population: 2934152 },
                                    { Name: "Qatar", Population: 2694849 },
                                    { Name: "Bahrain", Population: 1566993 },
                                    { Name: "Cyprus", Population: 1189085 },
                                ]
                            },
                        ]
                    }]
            },


            {
                Continent: [
                    {
                        Name: "North America", Population: 579024000, States: [

                            {
                                Name: "Central America", Population: 174988756, Region: [
                                    { Name: "Mexico", Population: 130759074 },
                                    { Name: "Guatemala", Population: 17245346 },
                                    { Name: "Honduras", Population: 9417167 },
                                    { Name: "El, Salvador", Population: 6411558 },
                                    { Name: "Nicaragua", Population: 6284757 },
                                    { Name: "Costa, Rica", Population: 4953199 },
                                    { Name: "Panama", Population: 4162618 },
                                    { Name: "Belize", Population: 382444 },
                                ]
                            },
                            {
                                Name: "Northern America", Population: 358593810, Region: [
                                    { Name: "U.S.", Population: 3267667480 },
                                    { Name: "Canada", Population: 36953765 },
                                    { Name: "Bermuda", Population: 61070 },
                                    { Name: "Greenland", Population: 56565 },
                                    { Name: "Saint Pierre & Miquelon", Population: 6342 },
                                ]
                            },
                        ]
                    }]
            },


            {
                Continent: [
                    {
                        Name: "South America", Population: 422535000, States: [
                            { Name: "Brazil", Population: 204519000 },
                            { Name: "Colombia", Population: 48549000 },
                            { Name: "Argentina", Population: 43132000 },
                            { Name: "Peru", Population: 31153000 },
                            { Name: "Venezuela", Population: 30620000 },
                            { Name: "Chile", Population: 18006000 },
                            { Name: "Ecuador", Population: 16279000 },
                            { Name: "Bolivia", Population: 10520000 },
                            { Name: "Paraguay", Population: 7003000 },
                            { Name: "Uruguay", Population: 3310000 },
                            { Name: "Guyana", Population: 747000 },
                            { Name: "Suriname", Population: 560000 },
                            { Name: "French Guiana", Population: 262000 },
                            { Name: "Falkland Islands", Population: 3000 },
                        ]
                    },
                ]
            },


            {
                Continent: [
                    {
                        Name: "Europe", Population: 738849000, States: [
                            {
                                Name: "Eastern Europe", Population: 291953328, Region: [
                                    { Name: "Russia", Population: 143964709 },
                                    { Name: "Ukraine", Population: 44009214 },
                                    { Name: "Poland", Population: 38104832 },
                                    { Name: "Romania", Population: 19580634 },
                                    { Name: "Crech, Republic", Population: 10625250 },
                                    { Name: "Hungary", Population: 9688847 },
                                    { Name: "Belarus", Population: 9452113 },
                                    { Name: "Bulgaria", Population: 7036848 },
                                    { Name: "Slovakia", Population: 5449816 },
                                    { Name: "Moldova", Population: 4041065 },
                                ]
                            },
                            {
                                Name: "Northern Europe", Population: 103642971, Region: [
                                    { Name: "United Kingdom", Population: 66573504 },
                                    { Name: "Sweden", Population: 9982709 },
                                    { Name: "Denmark", Population: 5754356 },
                                    { Name: "Finland", Population: 5542517 },
                                    { Name: "Norway", Population: 5353363 },
                                    { Name: "Ireland", Population: 4803748 },
                                    { Name: "Lithuania", Population: 2876475 },
                                    { Name: "Latvia", Population: 1929938 },
                                    { Name: "Estonia", Population: 1306788 },
                                    { Name: "Iceland", Population: 337780 },
                                    { Name: "Channel Islands", Population: 166083 },
                                    { Name: "Isle of Man", Population: 84831 },
                                    { Name: "Faeroe Islands", Population: 49489 },
                                ]
                            },
                            {
                                Name: "Southern Europe", Population: 152172107, Region: [
                                    { Name: "Italy", Population: 59290969 },
                                    { Name: "Spain", Population: 46397452 },
                                    { Name: "Greece", Population: 11142161 },
                                    { Name: "Portugal", Population: 10291196 },
                                    { Name: "Serbia", Population: 8762027 },
                                    { Name: "Croatia", Population: 4164783 },
                                    { Name: "Bosnia and Herzegovina", Population: 3503554 },
                                    { Name: "Albania", Population: 2934363 },
                                    { Name: "Macedonia", Population: 2085051 },
                                    { Name: "Slovenia", Population: 2081260 },
                                    { Name: "Montenegro", Population: 629219 },
                                    { Name: "Malta", Population: 432089 },
                                    { Name: "Andorra", Population: 76953 },
                                    { Name: "Gibraltar", Population: 34733 },
                                    { Name: "San Marino", Population: 33557 },
                                    { Name: "Holy, See", Population: 801 },
                                ]
                            },
                            {
                                Name: "Western Europe", Population: 92746859, Region: [
                                    { Name: "Germany", Population: 82293457 },
                                    { Name: "France", Population: 65233271 },
                                    { Name: "Netherlands", Population: 17084459 },
                                    { Name: "Belgium", Population: 11498519 },
                                    { Name: "Austria", Population: 8751820 },
                                    { Name: "Switzerland", Population: 8544034 },
                                    { Name: "Luxembourg", Population: 590321 },
                                    { Name: "Monaco", Population: 38897 },
                                    { Name: "Liechtenstein", Population: 38155 },
                                ]
                            },
                        ]
                    }]
            }
        ];
        args.treemap.dataSource = data;
    }
</script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Sample reference

treemap sample.

Screenshot

Screenshot for your reference

Add label template with drill down

Yon can add a label template as

element to the tree map control when using the label template. To add a label template to the tree map control, you have to hide another labels by setting the showLabels property to false in leafItemSettings to show only the label template.

To add label template to tree map drilldown, follow the given steps:

Step 1:

Create a tree map control and enable the drill-down option.

<ejs-treemap id="container" load="load" drillStart="drillStart" weightValuePath="Sales" enableDrillDown="true" palette="palette">
            <e-treemap-leafitemsettings showLabels="false" labelTemplate="#template" templatePosition="Center">
            </e-treemap-leafitemsettings>
            <e-treemap-levels>
                <e-treemap-level groupPath="Continent" border="border">
                </e-treemap-level>
            </e-treemap-levels>
        </ejs-treemap>

Step 2:

Add the label template in the leafItemSettings options, and then set the showLabels property to false to hide another labels and show only label template.

tagHelper
label.cs
@{ 
   var palette = new string[] { "white" };
    var border = new TreeMapBorder { Color = "black", Width = 0.5 };
}
@using Syncfusion.EJ2;
<div>
    <div>
        <ejs-treemap id="container" load="load" drillStart="drillStart" weightValuePath="Sales" enableDrillDown="true" palette="palette">
            <e-treemap-leafitemsettings showLabels="false" labelTemplate="#template" templatePosition="Center">
            </e-treemap-leafitemsettings>
            <e-treemap-levels>
                <e-treemap-level groupPath="Continent" border="border">
                </e-treemap-level>
            </e-treemap-levels>
        </ejs-treemap>
    </div>
</div>
<div id="template" style="display:none">
    <div style="background-color: red">{{:Company}}</div>
</div>       
<script>
    function drillStart(args) {
        var labelElementGroup = document.getElementById('container_Label_Template_Group');
        labelElementGroup.remove();
    }
    function load(args) {
        var data = [
            { Continent: "China", Company: "Volkswagen", Sales: 3005994 },
            { Continent: "China", Company: "General Motors", Sales: 1230044 },
            { Continent: "China", Company: "Honda", Sales: 1197023 },
            { Continent: "United States", Company: "General Motors", Sales: 3042775 },
            { Continent: "United States", Company: "Ford", Sales: 2599193 },
            { Continent: "United States", Company: "Toyota", Sales: 2449587 },
            { Continent: "Japan", Company: "Toyota", Sales: 1527977 },
            { Continent: "Japan", Company: "Honda", Sales: 706982 },
            { Continent: "Japan", Company: "Suzuki", Sales: 623041 },
            { Continent: "Germany", Company: "Volkswagen", Sales: 655977 },
            { Continent: "Germany", Company: "Mercedes", Sales: 310845 },
            { Continent: "Germany", Company: "BMW", Sales: 261931 },
            { Continent: "United Kingdom", Company: "Ford ", Sales: 319442 },
            { Continent: "United Kingdom", Company: "Vauxhall", Sales: 251146 },
            { Continent: "United Kingdom", Company: "Volkswagen", Sales: 206994 }
        ];
        args.treemap.dataSource = data;
    }
</script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Sample reference

treemap sample.

Screenshot

Screenshot for your reference