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.
@(Html.DevExtreme().TreeMap() .DataSource(new List<object> { new { id = "1", name = "Africa" }, new { id = "1_1", parentId = "1", value = 21324000, name = "Lagos", country = "Nigeria" }, new { id = "1_2", parentId = "1", value = 9735000, name = "Kinshasa", country = "Democratic Republic of the Congo" }, new { id = "1_3", parentId = "1", value = 9278441, name = "Cairo", country = "Egypt" }, new { id = "2", name = "Asia" }, new { id = "2_1", parentId = "2", value = 24256800, name = "Shanghai", country = "China" }, new { id = "2_2", parentId = "2", value = 23500000, name = "Karachi", country = "Pakistan" }, new { id = "2_3", parentId = "2", value = 21516000, name = "Beijing", country = "China" }, new { id = "2_4", parentId = "2", value = 16787941, name = "Delhi", country = "India" }, new { id = "2_5", parentId = "2", value = 15200000, name = "Tianjin", country = "China" }, new { id = "3", name = "Australia" }, new { id = "3_1", parentId = "3", value = 4840600, name = "Sydney", country = "Austraila" }, new { id = "3_2", parentId = "3", value = 4440000, name = "Melbourne", country = "Austraila" }, new { id = "4", name = "Europe" }, new { id = "4_1", parentId = "4", value = 14160467, name = "Istanbul", country = "Turkey" }, new { id = "4_2", parentId = "4", value = 12197596, name = "Moscow", country = "Russia" }, new { id = "4_3", parentId = "4", value = 8538689, name = "London", country = "United Kingdom" }, new { id = "4_4", parentId = "4", value = 5191690, name = "Saint Petersburg", country = "Russia" }, new { id = "4_5", parentId = "4", value = 4470800, name = "Ankara", country = "Turkey" }, new { id = "4_6", parentId = "4", value = 3517424, name = "Berlin", country = "Germany" }, new { id = "5", name = "North America" }, new { id = "5_1", parentId = "5", value = 8874724, name = "Mexico City", country = "Mexico" }, new { id = "5_2", parentId = "5", value = 8550405, name = "New York City", country = "United States" }, new { id = "5_3", parentId = "5", value = 3884307, name = "Los Angeles", country = "United States" }, new { id = "5_4", parentId = "5", value = 2808503, name = "Toronto", country = "Canada" }, new { id = "6", name = "South America" }, new { id = "6_1", parentId = "6", value = 11895893, name = "São Paulo", country = "Brazil" }, new { id = "6_2", parentId = "6", value = 8693387, name = "Lima", country = "Peru" }, new { id = "6_3", parentId = "6", value = 7776845, name = "Bogotá", country = "Colombia" }, new { id = "6_4", parentId = "6", value = 6429923, name = "Rio de Janeiro", country = "Brazil" } }) .Title("The Most Populated Cities by Continents") .ResolveLabelOverflow(TreeMapResolveLabelOverflow.Ellipsis) .IdField("id") .ParentField("parentId") .Tooltip(t => t .Enabled(true) .Format(Format.Thousands) .CustomizeTooltip(@<text> 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 }; } </text>)) .Size(s => s.Height(500)) )
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ChartsController : Controller { public ActionResult FlatDataStructure() { return View(); } } }