Your search did not match any results.
Vector Map

Pie Markers

Documentation
This demo shows how to use markers of the "pie" type in the VectorMap. Values for pie markers are provided by the data field whose name is assigned to the dataField option.
@(Html.DevExtreme().VectorMap() .ID("vector-map") .Layers(layers => { layers.Add() .DataSource(new JS("DevExpress.viz.map.sources.world")) .HoverEnabled(false); layers.Add() .Name("pies") .DataSource(d => d .Mvc() .Controller("VectorMap") .LoadAction("GetPieMarkers") ) .DataSourceOptions(dso => dso.Map("vectorMap_piesLayer_dataSource_map")) .ElementType(VectorMapMarkerType.Pie) .DataField("values") .MinSize(20) .MaxSize(40) .SizeGroups(new double[] { 0, 8000, 10000, 50000 }); }) .Tooltip(t => t .Enabled(true) .CustomizeTooltip("vectorMap_customizeTooltip") ) .Legends(l => l.Add() .Source(s => s .Layer("pies") .Grouping("color") ) .CustomizeText("vectorMap_piesLegend_customizeText") ) .Bounds(new double[] { -180, 85, 180, -60 }) ) <script src="~/Scripts/data/names.js"></script> <script> function vectorMap_piesLayer_dataSource_map(item) { item.features=$.map(item.features, function(data) { var list = ["<b>" + data.country + "</b>"]; $.each(data.values, function(i, value) { if (value > 0) { list.push(names[i] + ": " + value + "%"); } }); return { type: "Feature", geometry: { type: "Point", coordinates: data.coordinates }, properties: { tooltip: list.join("\n"), values: data.values } }; } ); return item; } function vectorMap_customizeTooltip(arg) { if(arg.layer.type === "marker") { return { text: arg.attribute("tooltip") }; } } function vectorMap_piesLegend_customizeText(arg) { return names[arg.index]; } </script>
using DevExtreme.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class VectorMapController : Controller { public ActionResult PieMarkers() { return View(); } [HttpGet] public ContentResult GetPieMarkers() { return Content(JsonConvert.SerializeObject(SampleData.PieMarkersData), "application/json"); } } }
var names = ["Christian", "Muslim", "Unaffiliated", "Buddhist", "Jewish"];
namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly object PieMarkersData = new { type = "FeatureCollection", features = new[] { new { coordinates = new[] { 34.6, -5.1 }, values = new[] { 61.4, 35.2, 1.4, 0, 0 }, country = "Tanzania" }, new { coordinates = new[] { 18.8, 15 }, values = new[] { 40.6, 55.3, 2.5, 0, 0 }, country = "Chad" }, new { coordinates = new[] { 7.36, 9.97 }, values = new[] { 49.3, 48.8, 0.4, 0, 0 }, country = "Nigeria" }, new { coordinates = new[] { 135.61, -24.57 }, values = new[] { 67.3, 2.4, 24.2, 2.7, 0.5 }, country = "Australia" }, new { coordinates = new[] { 103.3, 34.85 }, values = new[] { 5.1, 1.8, 52.2, 18.2, 0 }, country = "China" }, new { coordinates = new[] { 139.5, 37 }, values = new[] { 1.6, 0.2, 57, 36.2, 0 }, country = "Japan" }, new { coordinates = new[] { 100.8, 15.9 }, values = new[] { 0.9, 5.5, 0.3, 93.2, 0 }, country = "Thailand" }, new { coordinates = new[] { 10.4, 51.4 }, values = new[] { 68.7, 5.8, 24.7, 0.3, 0.3 }, country = "Germany" }, new { coordinates = new[] { 100.8, 65.3 }, values = new[] { 73.3, 10, 16.2, 0.1, 0.2 }, country = "Russia" }, new { coordinates = new[] { -3.48, 40.36 }, values = new[] { 78.6, 2.1, 19, 0, 0.1 }, country = "Spain" }, new { coordinates = new[] { -78.01, 21.72 }, values = new[] { 59.2, 0, 23, 0, 0 }, country = "Cuba" }, new { coordinates = new[] { -63.7, -31.92 }, values = new[] { 85.2, 1, 12.2, 0.05, 0.5 }, country = "Argentina" }, new { coordinates = new[] { -110.53, 60.78 }, values = new[] { 69, 2.1, 23.7, 0.5, 0.3 }, country = "Canada" }, new { coordinates = new[] { -100.1, 40.14 }, values = new[] { 78.3, 0.9, 16.4, 1.2, 1.8 }, country = "United States" }, new { coordinates = new[] { 34.88, 31.16 }, values = new[] { 2, 18.6, 3.1, 0.3, 75.6 }, country = "Israel" } } }; } }
#vector-map { height: 440px; width: 100%; display: block; }