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 property.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@(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.StaticJson().Url(Url.Action("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 = ["<span class='country'>" + data.country + "</span>", " "];
$.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[] {
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;
}
.country {
font-size: 15px;
font-weight: 500;
}