Your search did not match any results.

Charts - Drill Down

If you bind a TreeMap to a data source with a hierarchical structure, you can enable drill-down and drill-up functionality:

  • "Drill down" means navigate to a more detailed view.
  • "Drill up" means navigate back up a level.
www.wikipedia.org
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 Newtonsoft.Json; 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:

  1. Set the interactWithGroup property to true to force the control to hot-track entire groups instead of individual items.

  2. Call the node.drillDown method in the TreeMap onClick handler.

  3. 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.