Search results

Data Binding

The tree map 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 tree map control.

tagHelper
flat.cs
@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="GDP">
            <e-treemap-leafitemsettings labelPath="State"></e-treemap-leafitemsettings>
    </ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [
		{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}
        ];
        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();
        }
    }
}

Hierarchical collection

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

tagHelper
hierachical.cs
@{ 
   var border = new TreeMapBorder{ Color = "white", Width = 0.5 };
    var borders = new TreeMapBorder{ Color = "black", Width = 0.5 };
}
@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="Population">
            <e-treemap-leafitemsettings labelPath="Region" fill='#0077b3' border='border' ></e-treemap-leafitemsettings>
			<e-treemap-levels>
			<e-treemap-level groupPath= 'Continent' fill='#004466' border='borders'><e-treemap-level>
			<e-treemap-level groupPath= 'States' fill='#0099e6' border='borders'><e-treemap-level>
			</<e-treemap-levels>
    </ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [{
 		"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
 					}]
 				}
 			]
 		}]
 	}
 ];
        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();
        }
    }
}