@{
var data = (DevExtreme.MVC.Demos.Models.SampleData.DoughnutWithCustomLabelInCenterDataItem[])Model;
var countries = Enumerable.Distinct((data).Select(i => i.Country));
}
<div class="long-title"><h3>Energy Production (GWh, 2016)</h3></div>
<div class="pies-container">
@foreach(var country in countries) {
@(Html.DevExtreme().PieChart()
.Type(PieChartType.Doughnut)
.ResolveLabelOverlapping(PieChartResolveLabelOverlapping.Shift)
.InnerRadius(0.65)
.SizeGroup("piesGroup")
.Series(s => s
.Add()
.ArgumentField("Commodity")
.ValueField("Total")
.Label(l=>l.Visible(true)
.Connector(c=>c.Visible(true))
.BackgroundColor("none")
.CustomizeText("customizeLabel")
.Format(Format.FixedPoint)
)
)
.Legend(l=>l.Visible(false))
.CenterTemplate(@<text>
<svg>
<circle cx="100" cy="100" r="<%- getInnerRadius() - 6 %>" fill="#eee"></circle>
<image href="<%- getImagePath('@(country)') %>" x="70" y="58" width="60px" height="40px"/>
<text text-anchor="middle" style="font-size: 18px" x="100" y="120" fill="#494949">
<tspan x="100" >@(country)</tspan><tspan x="100" dy="20px" style="font-weight: 600"><%- formatNumber(calculateTotal(getAllSeries())) %></tspan>
</text>
</svg>
</text>)
.DataSource(data.Where(item=>item.Country==country).ToList())
)
}
</div>
<script>
var formatNumber = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format;
function getImagePath(country) {
return '../../Content/Images/flags/' + country.replace(/\s/, "").toLowerCase() + ".svg";
}
function customizeLabel(e) {
return e.argumentText + "\n" + e.valueText;
}
function calculateTotal(series) {
return series[0].getVisiblePoints().reduce(function (s, p) { return s + p.originalValue }, 0);
}
</script>
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.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult DoughnutWithCustomLabelInCenter() {
return View(SampleData.DoughnutWithCustomLabelInCenterData);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public class DoughnutWithCustomLabelInCenterDataItem {
public string Country { get; set; }
public string Commodity { get; set; }
public int Total { get; set; }
}
public partial class SampleData {
public static readonly IEnumerable<DoughnutWithCustomLabelInCenterDataItem>
DoughnutWithCustomLabelInCenterData = new DoughnutWithCustomLabelInCenterDataItem[] {
new DoughnutWithCustomLabelInCenterDataItem() { Country = "France", Commodity = "Nuclear", Total = 413278 },
new DoughnutWithCustomLabelInCenterDataItem() { Country = "Germany", Commodity = "Nuclear", Total = 76536 },
new DoughnutWithCustomLabelInCenterDataItem() { Country = "France", Commodity = "Thermal", Total = 47594 },
new DoughnutWithCustomLabelInCenterDataItem() { Country = "Germany", Commodity = "Thermal", Total = 375809 },
new DoughnutWithCustomLabelInCenterDataItem() { Country = "France", Commodity = "Wind", Total = 21033 },
new DoughnutWithCustomLabelInCenterDataItem() { Country = "Germany", Commodity = "Wind", Total = 58228 },
new DoughnutWithCustomLabelInCenterDataItem() { Country = "France", Commodity = "Solar", Total = 7274 },
new DoughnutWithCustomLabelInCenterDataItem() { Country = "Germany", Commodity = "Solar", Total = 37520 },
new DoughnutWithCustomLabelInCenterDataItem() { Country = "France", Commodity = "Tidal, Wave", Total = 618 }
};
}
}
.pies-container {
margin: auto;
width: 800px;
}
.pies-container > div {
width: 400px;
float: left;
margin-top: -50px;
}
.long-title h3 {
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
}