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">
@Html.EJS().TreeMap("container").Load("load").WeightValuePath("GDP").LeafItemSettings(leaf => leaf.LabelPath("State")).Render()
</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.
@using Syncfusion.EJ2;
<div id="container">
@Html.EJS().TreeMap("container").Load("load").WeightValuePath("Population").LeafItemSettings(leaf => leaf.LabelPath("Region").Fill("#0077b3").Border(new TreeMapBorder { Color = "black", Width = 0.5 })).Levels(level =>
{
level.GroupPath("Continent").Fill("#004466").Border(new TreeMapBorder { Color = "black", Width = 0.5 }).Add();
level.GroupPath("States").Fill("#0099e6").Border(new TreeMapBorder { Color = "black", Width = 0.5 }).Add();
}).Render()
</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();
}
}
}