The tree map control supports data binding using the dataSource property.
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.
@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.
@{
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();
}
}
}