Search results

Data Binding in JavaScript (ES5) TreeMap control

01 Dec 2021 / 3 minutes to read

The TreeMap control supports data binding using the dataSource property.

Populate data

The dataSource property accepts collection values as input. For example, a list of objects can be provided as input. Data can be given as either flat or hierarchical collection to the dataSource property.

Flat collection

The following code shows, how to bind a flat collection as data source to the TreeMap control.

Source
Preview
index.js
index.html
Copied to clipboard
var treemap = new ej.treemap.TreeMap({
    dataSource: [
        {State:"United States", GDP:17946, percentage:11.08, Rank:1},
        {State:"China", GDP:10866, percentage: 28.42, Rank:2},
        {State:"Japan", GDP:4123, percentage:-30.78, Rank:3},
        {State:"Germany", GDP:3355, percentage:-5.19, Rank:4},
        {State:"United Kingdom", GDP:2848, percentage:8.28, Rank:5},
        {State:"France", GDP:2421, percentage:-9.69, Rank:6},
        {State:"India", GDP:2073, percentage:13.65, Rank:7},
        {State:"Italy", GDP:1814, percentage:-12.45, Rank:8},
        {State:"Brazil", GDP:1774, percentage:-27.88, Rank:9},
        {State:"Canada", GDP:1550, percentage:-15.02, Rank:10}
    ],
    weightValuePath: 'GDP',
    leafItemSettings: {
        labelPath: 'State'
    },
}, '#container');
Copied to clipboard
<!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="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <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>

Hierarchical collection

The following code shows, how to bind a hierarchical collection as data source to the TreeMap control.

Source
Preview
index.js
index.html
Copied to clipboard
var treemap = new ej.treemap.TreeMap({
    dataSource: [{
 		"Continent": [{
 			"Name": "Africa",
 			"Population": 1216130000,
 			"States": [{
 					"Name": "Eastern Africa",
 					"Population": 410637987,
 					"Region": [{
 						"Name": "Ethiopia",
 						"Population": 107534882
 					}]
 				},
 				{
 					"Name": "Middle Africa",
 					"Population": 158562976,
 					"Region": [{
 						"Name": "Democratic, Republic of the Congo",
 						"Population": 84004989
 					}]
 				}
 			]
 		}]
 	},

 	{
 		"Continent": [{
 			"Name": "Asia",
 			"Population": 4436224000,
 			"States": [{
 					"Name": "Central Asia",
 					"Population": 69787760,
 					"Region": [{
 						"Name": "Uzbekistan",
 						"Population": 32364996
 					}]
 				},
 				{
 					"Name": "Eastern Asia",
 					"Population": 1641908531,
 					"Region": [{
 						"Name": "China",
 						"Population": 1415045928
 					}]
 				}
 			]
 		}]
 	},

 	{
 		"Continent": [{
 			"Name": "North America",
 			"Population": 579024000,
 			"States": [{
 					"Name": "Central America",
 					"Population": 174988756,
 					"Region": [{
 						"Name": "Mexico",
 						"Population": 130759074
 					}]
 				},
 				{
 					"Name": "Northern America",
 					"Population": 358593810,
 					"Region": [{
 						"Name": "U.S.",
 						"Population": 3267667480
 					}]
 				}
 			]
 		}]
 	},
 	{
 		"Continent": [{
 			"Name": "South America",
 			"Population": 422535000,
 			"States": [{
 				"Name": "Brazil",
 				"Population": 204519000
 			}]
 		}]
 	},
 	{
 		"Continent": [{
 			"Name": "Europe",
 			"Population": 738849000,
 			"States": [{
 					"Name": "Eastern Europe",
 					"Population": 291953328,
 					"Region": [{
 						"Name": "Russia",
 						"Population": 143964709
 					}]
 				},
 				{
 					"Name": "Northern Europe",
 					"Population": 103642971,
 					"Region": [{
 						"Name": "United Kingdom",
 						"Population": 66573504
 					}]
 				}
 			]
 		}]
 	}
 ],
    weightValuePath: 'Population',
    leafItemSettings: {
        labelPath: 'Name',
        fill:'#0077b3',
        border: { color: 'black', width: 0.5 }
    },
    levels: [
        { groupPath: 'Continent',fill:'#004466', border: { color: 'black', width: 0.5 } },
        { groupPath: 'States', fill:'#0099e6', border: { color: 'black', width: 0.5 } },
    ]
}, '#container');
Copied to clipboard
<!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="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <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>