Backend API
@model IEnumerable<DevExtreme.NETCore.Demos.Models.ContinentPopulation>
@(Html.DevExtreme().TreeMap()
.DataSource(Model)
.Size(s => s.Height(440))
.Title(t => t
.Text("The Most Populated Cities by Continents")
.PlaceholderSize(80))
.Colorizer(c => c.Palette(VizPalette.Soft))
.InteractWithGroup(true)
.MaxDepth(2)
.OnClick(@<text>
function(e) {
e.node.drillDown();
}
</text>)
.OnDrill(@<text>
function(e) {
var markup = $("#drill-down-title").empty(),
node;
for(node = e.node.getParent(); node; node = node.getParent()) {
markup.prepend(" > ").prepend($("<span />")
.addClass("link")
.text(node.label() || "All Continents")
.data("node", node)
.on("dxclick", onLinkClick));
}
if(markup.children().length) {
markup.append(e.node.label());
}
}
</text>)
)
<div id="drill-down-title"></div>
<script>
function onLinkClick(e) {
$(e.target).data("node").drillDown();
}
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.NETCore.Demos.Models;
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult DrillDown() {
return View(SampleData.ContinentsPopulation);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models {
public class CityPopulation {
public string name { get; set; }
public int value { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models {
public class ContinentPopulation {
public string name { get; set; }
public IEnumerable<CountryPopulation> items { get; set; }
}
}
using System.Collections.Generic;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<ContinentPopulation> ContinentsPopulation = new[] {
new ContinentPopulation {
name = "Africa",
items = new[] {
new CountryPopulation {
name = "Nigeria",
items = new[] {
new CityPopulation {
name = "Lagos",
value = 21324000
},
new CityPopulation {
name = "Kano",
value = 3626068
},
new CityPopulation {
name = "Ibadan",
value = 3200000
},
new CityPopulation {
name = "Abuja",
value = 3000000
},
new CityPopulation {
name = "Kaduna",
value = 1652844
},
new CityPopulation {
name = "Port Harcourt",
value = 1320214
},
new CityPopulation {
name = "Aba",
value = 1300000
},
new CityPopulation {
name = "Ogbomosho",
value = 1200000
},
new CityPopulation {
name = "Maiduguri",
value = 1197497
}
}
},
new CountryPopulation {
name = "Egypt",
items = new[] {
new CityPopulation {
name = "Cairo",
value = 9278441
},
new CityPopulation {
name = "Alexandria",
value = 4546231
},
new CityPopulation {
name = "Giza",
value = 4239988
},
new CityPopulation {
name = "Shubra El-Kheima",
value = 3072951
},
new CityPopulation {
name = "Port Said",
value = 1607353
},
new CityPopulation {
name = "Suez",
value = 1347352
}
}
},
new CountryPopulation {
name = "Congo",
items = new[] {
new CityPopulation {
name = "Kinshasa",
value = 9735000
},
new CityPopulation {
name = "Lubumbashi",
value = 1786397
},
new CityPopulation {
name = "Mbuji-Mayi",
value = 1680991
},
new CityPopulation {
name = "Kananga",
value = 1061181
},
new CityPopulation {
name = "Bukavu",
value = 1012053
},
new CityPopulation {
name = "Kisangani",
value = 935977
}
}
},
new CountryPopulation {
name = "Morocco",
items = new[] {
new CityPopulation {
name = "Casablanca",
value = 3359818
},
new CityPopulation {
name = "Fès",
value = 1112072
},
new CityPopulation {
name = "Tangier",
value = 947952
},
new CityPopulation {
name = "Marrakech",
value = 928850
},
new CityPopulation {
name = "Salé",
value = 920403
}
}
}
}
},
new ContinentPopulation {
name = "Asia",
items = new[] {
new CountryPopulation {
name = "China",
items = new[] {
new CityPopulation {
name = "Shanghai",
value = 24256800
},
new CityPopulation {
name = "Beijing",
value = 21516000
},
new CityPopulation {
name = "Chongqing",
value = 18384100
},
new CityPopulation {
name = "Chengdu",
value = 17677122
},
new CityPopulation {
name = "Tianjin",
value = 15200000
},
new CityPopulation {
name = "Guangzhou",
value = 13080500
},
new CityPopulation {
name = "Shenzhen",
value = 10630000
}
}
},
new CountryPopulation {
name = "Pakistan",
items = new[] {
new CityPopulation {
name = "Karachi",
value = 23500000
},
new CityPopulation {
name = "Faisalabad",
value = 6418745
},
new CityPopulation {
name = "Lahore",
value = 6318745
},
new CityPopulation {
name = "Rawalpindi",
value = 3363911
},
new CityPopulation {
name = "Hyderabad",
value = 3429471
},
new CityPopulation {
name = "Multan",
value = 2050000
}
}
},
new CountryPopulation {
name = "India",
items = new[] {
new CityPopulation {
name = "Delhi",
value = 16787941
},
new CityPopulation {
name = "Mumbai",
value = 12478447
},
new CityPopulation {
name = "Bengaluru",
value = 8425970
},
new CityPopulation {
name = "Hyderabad",
value = 7749334
},
new CityPopulation {
name = "Chennai",
value = 7088000
},
new CityPopulation {
name = "Ahmedabad",
value = 5577940
}
}
},
new CountryPopulation {
name = "Japan",
items = new[] {
new CityPopulation {
name = "Tokyo",
value = 9262046
},
new CityPopulation {
name = "Yokohama",
value = 3697894
},
new CityPopulation {
name = "Osaka",
value = 2668586
},
new CityPopulation {
name = "Nagoya",
value = 2283289
},
new CityPopulation {
name = "Sapporo",
value = 1918096
}
}
}
}
},
new ContinentPopulation {
name = "Europe",
items = new[] {
new CountryPopulation {
name = "Turkey",
items = new[] {
new CityPopulation {
name = "Istanbul",
value = 14160467
},
new CityPopulation {
name = "Ankara",
value = 4470800
},
new CityPopulation {
name = "İzmir",
value = 3276815
},
new CityPopulation {
name = "Bursa",
value = 1957247
},
new CityPopulation {
name = "Adana",
value = 1717473
}
}
},
new CountryPopulation {
name = "Russia",
items = new[] {
new CityPopulation {
name = "Moscow",
value = 12197596
},
new CityPopulation {
name = "Saint Petersburg",
value = 5191690
},
new CityPopulation {
name = "Novosibirsk",
value = 1473754
},
new CityPopulation {
name = "Yekaterinburg",
value = 1428042
}
}
},
new CountryPopulation {
name = "United Kingdom",
items = new[] {
new CityPopulation {
name = "London",
value = 8538689
},
new CityPopulation {
name = "Birmingham",
value = 1101360
},
new CityPopulation {
name = "Glasgow",
value = 599650
},
new CityPopulation {
name = "Liverpool",
value = 473073
}
}
},
new CountryPopulation {
name = "Germany",
items = new[] {
new CityPopulation {
name = "Berlin",
value = 3517424
},
new CityPopulation {
name = "Hamburg",
value = 1686100
},
new CityPopulation {
name = "Munich",
value = 1185400
},
new CityPopulation {
name = "Cologne",
value = 1046680
},
new CityPopulation {
name = "Frankfurt",
value = 717624
}
}
},
new CountryPopulation {
name = "France",
items = new[] {
new CityPopulation {
name = "Paris",
value = 2240621
},
new CityPopulation {
name = "Marseille",
value = 852516
},
new CityPopulation {
name = "Lyon",
value = 500715
},
new CityPopulation {
name = "Toulouse",
value = 461190
}
}
}
}
},
new ContinentPopulation {
name = "North America",
items = new[] {
new CountryPopulation {
name = "Mexico",
items = new[] {
new CityPopulation {
name = "Mexico City",
value = 8874724
},
new CityPopulation {
name = "Ecatepec de Morelos",
value = 1742023
},
new CityPopulation {
name = "Puebla",
value = 1508707
},
new CityPopulation {
name = "Guadalajara",
value = 1506359
},
new CityPopulation {
name = "Juárez",
value = 1409987
},
new CityPopulation {
name = "Tijuana",
value = 1399282
},
new CityPopulation {
name = "León",
value = 1281434
}
}
},
new CountryPopulation {
name = "United States",
items = new[] {
new CityPopulation {
name = "New York City",
value = 8550405
},
new CityPopulation {
name = "Los Angeles",
value = 3884307
},
new CityPopulation {
name = "Chicago",
value = 2722389
},
new CityPopulation {
name = "Houston",
value = 2296224
},
new CityPopulation {
name = "Philadelphia",
value = 1567442
},
new CityPopulation {
name = "Phoenix",
value = 1563025
},
new CityPopulation {
name = "San Antonio",
value = 1469845
},
new CityPopulation {
name = "San Diego",
value = 1394928
}
}
},
new CountryPopulation {
name = "Canada",
items = new[] {
new CityPopulation {
name = "Toronto",
value = 2808503
},
new CityPopulation {
name = "Montreal",
value = 1731245
},
new CityPopulation {
name = "Calgary",
value = 1096833
},
new CityPopulation {
name = "Ottawa",
value = 956710
},
new CityPopulation {
name = "Edmonton",
value = 895000
},
new CityPopulation {
name = "Mississauga",
value = 713443
}
}
},
new CountryPopulation {
name = "Cuba",
items = new[] {
new CityPopulation {
name = "Havana",
value = 2135498
},
new CityPopulation {
name = "Santiago de Cuba",
value = 425851
},
new CityPopulation {
name = "Camagüey",
value = 305845
}
}
}
}
},
new ContinentPopulation {
name = "South America",
items = new[] {
new CountryPopulation {
name = "Brazil",
items = new[] {
new CityPopulation {
name = "São Paulo",
value = 11895893
},
new CityPopulation {
name = "Rio de Janeiro",
value = 6429923
},
new CityPopulation {
name = "Salvador",
value = 2902927
},
new CityPopulation {
name = "Brasília",
value = 2914830
},
new CityPopulation {
name = "Fortaleza",
value = 2591188
},
new CityPopulation {
name = "Belo Horizonte",
value = 2513451
},
new CityPopulation {
name = "Manaus",
value = 2094391
}
}
},
new CountryPopulation {
name = "Peru",
items = new[] {
new CityPopulation {
name = "Lima",
value = 8693387
},
new CityPopulation {
name = "Callao",
value = 1010315
},
new CityPopulation {
name = "Arequipa",
value = 869351
},
new CityPopulation {
name = "Trujillo",
value = 788236
},
new CityPopulation {
name = "Chiclayo",
value = 600440
}
}
},
new CountryPopulation {
name = "Colombia",
items = new[] {
new CityPopulation {
name = "Bogotá",
value = 7776845
},
new CityPopulation {
name = "Medellín",
value = 2441123
},
new CityPopulation {
name = "Cali",
value = 2400653
},
new CityPopulation {
name = "Barranquilla",
value = 1214253
},
new CityPopulation {
name = "Cartagena",
value = 959594
}
}
},
new CountryPopulation {
name = "Chile",
items = new[] {
new CityPopulation {
name = "Santiago",
value = 5507282
},
new CityPopulation {
name = "Puente Alto",
value = 610118
},
new CityPopulation {
name = "Maipú",
value = 468390
}
}
},
new CountryPopulation {
name = "Venezuela",
items = new[] {
new CityPopulation {
name = "Caracas",
value = 3289886
},
new CityPopulation {
name = "Maracaibo",
value = 1653211
},
new CityPopulation {
name = "Barquisimeto",
value = 1116182
},
new CityPopulation {
name = "Valencia",
value = 901900
},
new CityPopulation {
name = "Ciudad Guayana",
value = 877547
}
}
}
}
}
};
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models {
public class CountryPopulation {
public string name { get; set; }
public IEnumerable<CityPopulation> items { get; set; }
}
}
#drill-down-title {
position: absolute;
top: 50px;
height: 36px;
width: 100%;
text-align: center;
}
.link {
color: #337ab7;
text-decoration: underline;
cursor: pointer;
}
In this demo, you can click/tap a group of TreeMap tiles to drill down. Once you go down a level, navigation links appear at the top of the TreeMap. Use them to drill back up. To implement this technique, follow the steps below:
-
Set the interactWithGroup property to
trueto force the control to hot-track entire groups instead of individual items. -
Call the node.drillDown method in the TreeMap onClick handler.
-
To enable drill-up functionality, generate links in the onDrill handler. Call the node.drillDown method on link clicks. Inspect the code below for implementation details.