Your search did not match any results.

Drill Down

Documentation

This demo shows a drill-down chart that visualizes data on two hierarchical views. The main view displays the population breakdown by continent. When you click the bar, a detailed view reveals the most populated countries on the selected continent.

Bind to Data

This demo bounds the drill-down chart to an array of objects. To visualize hierarchical data in the drill-down chart, filter the data source by the parentID for different drill-down views in the filterData function.

Implement View Navigation

To navigate from the main view to a detailed view, filter the data source by a different parentID in the onPointClick event handler. To navigate back, click the Back button. This action resets the data source filter. Use the isFirstLevel flag to distinguish views.

Customize the Appearance

Use the customizePoint function to change the individual point properties. This function returns an object with properties that should be changed for a certain point. In this demo, this function changes the color and hoverStyle properties.

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; }