Your search did not match any results.
Tree Map

Drill Down

Documentation
The TreeMap widget provides an API for implementing the drill-down functionality. Click a group in the widget to drill down it. A set of clickable labels, which allow you to navigate back, will appear.
www.wikipedia.org
Copy to CodePen
Apply
Reset
window.onload = function() { var markup = ko.observableArray([]); var viewModel = { markup: markup, treeMapOptions: { dataSource: citiesPopulation, size: { height: 440 }, title: { text: "The Most Populated Cities by Continents", placeholderSize: 80 }, colorizer: { palette: "soft" }, interactWithGroup: true, maxDepth: 2, onClick: function(e) { e.node.drillDown(); }, onDrill: function(e) { var node; viewModel.markup([]); for (node = e.node.getParent(); node; node = node.getParent()) { viewModel.markup.unshift({ html: "<span class='link'>" + (node.label() || "All Continents") + "</span> <span> > </span>", node: node }); } if (viewModel.markup().length) { viewModel.markup.push({ html: e.node.label(), node: e.node }); } } }, onLinkClick: function(e) { e.node.drillDown(); } }; ko.applyBindings(viewModel, document.getElementById("treemap-demo")); };
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="js/jquery-3.1.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/message.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/number.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/currency.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/date.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/17.1.5/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="treemap-demo"> <div id="drill-down-title" data-bind="foreach: markup"> <span data-bind="html: html, click: $parent.onLinkClick"></span> </div> <div data-bind="dxTreeMap: treeMapOptions"></div> </div> </div> </body> </html>
#drill-down-title { position: absolute; top: 50px; height: 36px; width: 100%; text-align: center; } .link { color: #337ab7; text-decoration: underline; cursor: pointer; }
var citiesPopulation = [{ name: "Africa", items: [{ name: "Nigeria", items: [{ name: "Lagos", value: 21324000 }, { name: "Kano", value: 3626068 }, { name: "Ibadan", value: 3200000 }, { name: "Abuja", value: 3000000 }, { name: "Kaduna", value: 1652844 }, { name: "Port Harcourt", value: 1320214 }, { name: "Aba", value: 1300000 }, { name: "Ogbomosho", value: 1200000 }, { name: "Maiduguri", value: 1197497 }] }, { name: "Egypt", items: [{ name: "Cairo", value: 9278441 }, { name: "Alexandria", value: 4546231 }, { name: "Giza", value: 4239988 }, { name: "Shubra El-Kheima", value: 3072951 }, { name: "Port Said", value: 1607353 }, { name: "Suez", value: 1347352 }] }, { name: "Congo", items: [{ name: "Kinshasa", value: 9735000 }, { name: "Lubumbashi", value: 1786397 }, { name: "Mbuji-Mayi", value: 1680991 }, { name: "Kananga", value: 1061181 }, { name: "Bukavu", value: 1012053 }, { name: "Kisangani", value: 935977 }] }, { name: "Morocco", items: [{ name: "Casablanca", value: 3359818 }, { name: "Fès", value: 1112072 }, { name: "Tangier", value: 947952 }, { name: "Marrakech", value: 928850 }, { name: "Salé", value: 920403 }] }] }, { name: "Asia", items: [{ name: "China", items: [{ name: "Shanghai", value: 24256800 }, { name: "Beijing", value: 21516000 }, { name: "Chongqing", value: 18384100 }, { name: "Chengdu", value: 17677122 }, { name: "Tianjin", value: 15200000 }, { name: "Guangzhou", value: 13080500 }, { name: "Shenzhen", value: 10630000 }] }, { name: "Pakistan", items: [{ name: "Karachi", value: 23500000 }, { name: "Faisalabad", value: 6418745 }, { name: "Lahore", value: 6318745 }, { name: "Rawalpindi", value: 3363911 }, { name: "Hyderabad", value: 3429471 }, { name: "Multan", value: 2050000 }] }, { name: "India", items: [{ name: "Delhi", value: 16787941 }, { name: "Mumbai", value: 12478447 }, { name: "Bengaluru", value: 8425970 }, { name: "Hyderabad", value: 7749334 }, { name: "Chennai", value: 7088000 }, { name: "Ahmedabad", value: 5577940 }] }, { name: "Japan", items: [{ name: "Tokyo", value: 9262046 }, { name: "Yokohama", value: 3697894 }, { name: "Osaka", value: 2668586 }, { name: "Nagoya", value: 2283289 }, { name: "Sapporo", value: 1918096 }] }] }, { name: "Europe", items: [{ name: "Turkey", items: [{ name: "Istanbul", value: 14160467 }, { name: "Ankara", value: 4470800 }, { name: "İzmir", value: 3276815 }, { name: "Bursa", value: 1957247 }, { name: "Adana", value: 1717473 }] }, { name: "Russia", items: [{ name: "Moscow", value: 12197596 }, { name: "Saint Petersburg", value: 5191690 }, { name: "Novosibirsk", value: 1473754 }, { name: "Yekaterinburg", value: 1428042 }] }, { name: "United Kingdom", items: [{ name: "London", value: 8538689 }, { name: "Birmingham", value: 1101360 }, { name: "Glasgow", value: 599650 }, { name: "Liverpool", value: 473073 }] }, { name: "Germany", items: [{ name: "Berlin", value: 3517424 }, { name: "Hamburg", value: 1686100 }, { name: "Munich", value: 1185400 }, { name: "Cologne", value: 1046680 }, { name: "Frankfurt", value: 717624 }] }, { name: "France", items: [{ name: "Paris", value: 2240621 }, { name: "Marseille", value: 852516 }, { name: "Lyon", value: 500715 }, { name: "Toulouse", value: 461190 }] }] }, { name: "North America", items: [{ name: "Mexico", items: [{ name: "Mexico City", value: 8874724 }, { name: "Ecatepec de Morelos", value: 1742023 }, { name: "Puebla", value: 1508707 }, { name: "Guadalajara", value: 1506359 }, { name: "Juárez", value: 1409987 }, { name: "Tijuana", value: 1399282 }, { name: "León", value: 1281434 }] }, { name: "United States", items: [{ name: "New York City", value: 8550405 }, { name: "Los Angeles", value: 3884307 }, { name: "Chicago", value: 2722389 }, { name: "Houston", value: 2296224 }, { name: "Philadelphia", value: 1567442 }, { name: "Phoenix", value: 1563025 }, { name: "San Antonio", value: 1469845 }, { name: "San Diego", value: 1394928 }] }, { name: "Canada", items: [{ name: "Toronto", value: 2808503 }, { name: "Montreal", value: 1731245 }, { name: "Calgary", value: 1096833 }, { name: "Ottawa", value: 956710 }, { name: "Edmonton", value: 895000 }, { name: "Mississauga", value: 713443 }] }, { name: "Cuba", items: [{ name: "Havana", value: 2135498 }, { name: "Santiago de Cuba", value: 425851 }, { name: "Camagüey", value: 305845 }] }] }, { name: "South America", items: [{ name: "Brazil", items: [{ name: "São Paulo", value: 11895893 }, { name: "Rio de Janeiro", value: 6429923 }, { name: "Salvador", value: 2902927 }, { name: "Brasília", value: 2914830 }, { name: "Fortaleza", value: 2591188 }, { name: "Salvador", value: 2902927 }, { name: "Salvador", value: 2902927 }] }, { name: "Peru", items: [{ name: "Lima", value: 8693387 }, { name: "Callao", value: 1010315 }, { name: "Arequipa", value: 869351 }, { name: "Trujillo", value: 788236 }, { name: "Chiclayo", value: 600440 }] }, { name: "Colombia", items: [{ name: "Bogotá", value: 7776845 }, { name: "Medellín", value: 2441123 }, { name: "Cali", value: 2400653 }, { name: "Barranquilla", value: 1214253 }, { name: "Cartagena", value: 959594 }] }, { name: "Chile", items: [{ name: "Santiago", value: 5507282 }, { name: "Puente Alto", value: 610118 }, { name: "Maipú", value: 468390 }] }, { name: "Venezuela", items: [{ name: "Caracas", value: 3289886 }, { name: "Maracaibo", value: 1653211 }, { name: "Barquisimeto", value: 1116182 }, { name: "Valencia", value: 901900 }, { name: "Ciudad Guayana", value: 877547 }] }] }];