Your search did not match any results.
Tree Map

Colorization

Documentation
The TreeMap widget provides a flexible system of tile colorization. You can assign colors to tiles depending on their values or the group they belong to. If colors are specified in your data source, you can use them as well. Finally, the widget includes nine built-in palettes that ensure the superb appearance.
@(Html.DevExtreme().TreeMap() .ID("treemap") .DataSource(new List<object> { new { name = "Monitors", items = new List<object> { new { name = "DesktopLCD 19", salesAmount = 23420 }, new { name = "DesktopLCD 21", salesAmount = 113900 }, new { name = "DesktopLED 19", salesAmount = 49170 }, new { name = "DesktopLED 21", salesAmount = 81200 } } }, new { name = "Projectors", items = new List<object> { new { name = "Projector Plus", salesAmount = 99000 }, new { name = "Projector PlusHD", salesAmount = 152250 } } }, new { name = "Televisions", items = new List<object> { new { name = "SuperLCD 55", salesAmount = 147150 }, new { name = "SuperLCD 42", salesAmount = 103200 }, new { name = "SuperLCD 70", salesAmount = 56000 }, new { name = "SuperLED 42", salesAmount = 159500 }, new { name = "SuperLED 50", salesAmount = 233600 }, new { name = "SuperPlasma 50", salesAmount = 184800 }, new { name = "SuperPlasma 65", salesAmount = 178500 } } }, new { name = "Video Players", items = new List<object> { new { name = "HD Video Player", salesAmount = 63690 }, new { name = "SuperHD Video Player", salesAmount = 74000 } } } }) .Title("Sales Amount by Product") .ValueField("salesAmount") .Tooltip(t => t .Enabled(true) .Format(Format.Currency) .CustomizeTooltip(@<text> function (arg) { var data = arg.node.data; return { text: arg.node.isLeaf() ? ("<b>" + data.name + "</b><br />Sales Amount: " + arg.valueText) : null }; } </text>)) .Colorizer(c => c .Type(TreeMapColorizerType.Range) .Range(new double[] { 0, 50000, 100000, 150000, 200000, 250000 }) .Palette(new string[] { "#fbd600", "#78299a" }) .ColorCodeField("salesAmount") .ColorizeGroups(false)) ) <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Colorization Type</span> @(Html.DevExtreme().SelectBox() .DataSource(new List<object> { new { name = "Discrete", options = new List<object> { new { type = "discrete", palette = "harmony light", colorizeGroups = false } } }, new { name = "Grouped", options = new List<object> { new { type = "discrete", palette = "harmony light", colorizeGroups = true } } }, new { name = "Range", options = new List<object> { new { type = "range", palette = new string[] { "#fbd600", "#78299a" }, colorizeGroups = false, range = new int[] { 0, 50000, 100000, 150000, 200000, 250000 }, colorCodeField = "salesAmount" } } }, new { name = "Gradient", options = new List<object> { new { type = "gradient", palette = new string[] { "#fbd600", "#78299a" }, colorizeGroups = false, range = new int[] { 10000, 250000 }, colorCodeField = "salesAmount" } } } }) .Width(200) .DisplayExpr("name") .ValueExpr("name") .Value("Range") .OnValueChanged("selectBox_valueChanged") .ElementAttr("class", "selectbox") ) </div> </div> <script> function selectBox_valueChanged(data) { $("#treemap") .dxTreeMap("instance") .option("colorizer", data.component.option("selectedItem").options[0]); } </script>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models; 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 Colorization() { return View(); } } }
.options { padding: 20px; background-color: #f5f5f5; margin-top: 20px; } .option { margin-top: 10px; } .caption { font-size: 18px; font-weight: 500; } .option > span { margin-right: 10px; } .option > .dx-widget { display: inline-block; vertical-align: middle; }