Your search did not match any results.
Charts

Flat Data Structure

Documentation
In this demo, the TreeMap widget accepts a data source of a flat structure.
Copy to Codepen
Apply
Reset
$(function(){ $("#treemap").dxTreeMap({ dataSource: citiesPopulation, title: "The Most Populated Cities by Continents", resolveLabelOverflow: "ellipsis", idField: "id", parentField: "parentId", tooltip: { enabled: true, format: "thousands", customizeTooltip: function (arg) { var data = arg.node.data, result = null; if (arg.node.isLeaf()) { result = "<b>" + data.name + "</b> (" + data.country + ")<br/>Population: " + arg.valueText; } return { text: result }; } }, size: { height: 500 } }); });
<!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/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/16.2.6/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.6/js/dx.all.js"></script> <script src="data.js"></script> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="treemap"></div> </div> </body> </html>
#container { width: 100%; height: 480px; }
var citiesPopulation = [{ id: "1", name: "Africa" }, { id: "1_1", parentId: "1", value: 21324000, name: "Lagos", country: "Nigeria" }, { id: "1_2", parentId: "1", value: 9735000, name: "Kinshasa", country: "Democratic Republic of the Congo" }, { id: "1_3", parentId: "1", value: 9278441, name: "Cairo", country: "Egypt" }, { id: "2", name: "Asia" }, { id: "2_1", parentId: "2", value: 24256800, name: "Shanghai", country: "China" }, { id: "2_2", parentId: "2", value: 23500000, name: "Karachi", country: "Pakistan" }, { id: "2_3", parentId: "2", value: 21516000, name: "Beijing", country: "China" }, { id: "2_4", parentId: "2", value: 16787941, name: "Delhi", country: "India" }, { id: "2_5", parentId: "2", value: 15200000, name: "Tianjin", country: "China" }, { id: "3", name: "Australia" }, { id: "3_1", parentId: "3", value: 4840600, name: "Sydney", country: "Austraila" }, { id: "3_2", parentId: "3", value: 4440000, name: "Melbourne", country: "Austraila" }, { id: "4", name: "Europe" }, { id: "4_1", parentId: "4", value: 14160467, name: "Istanbul", country: "Turkey" }, { id: "4_2", parentId: "4", value: 12197596, name: "Moscow", country: "Russia" }, { id: "4_3", parentId: "4", value: 8538689, name: "London", country: "United Kingdom" }, { id: "4_4", parentId: "4", value: 5191690, name: "Saint Petersburg", country: "Russia" }, { id: "4_5", parentId: "4", value: 4470800, name: "Ankara", country: "Turkey" }, { id: "4_6", parentId: "4", value: 3517424, name: "Berlin", country: "Germany" }, { id: "5", name: "North America" }, { id: "5_1", parentId: "5", value: 8874724, name: "Mexico City", country: "Mexico" }, { id: "5_2", parentId: "5", value: 8550405, name: "New York City", country: "United States" }, { id: "5_3", parentId: "5", value: 3884307, name: "Los Angeles", country: "United States" }, { id: "5_4", parentId: "5", value: 2808503, name: "Toronto", country: "Canada" }, { id: "6", name: "South America" }, { id: "6_1", parentId: "6", value: 11895893, name: "São Paulo", country: "Brazil" }, { id: "6_2", parentId: "6", value: 8693387, name: "Lima", country: "Peru" }, { id: "6_3", parentId: "6", value: 7776845, name: "Bogotá", country: "Colombia" }, { id: "6_4", parentId: "6", value: 6429923, name: "Rio de Janeiro", country: "Brazil" }];