@(Html.DevExtreme().PieChart()
.ID("pie")
.Palette(VizPalette.Bright)
.Title("Top internet languages")
.Legend(l => l
.HorizontalAlignment(HorizontalAlignment.Center)
.VerticalAlignment(VerticalEdge.Bottom)
)
.Export(e => e.Enabled(true))
.Series(s => s
.Add()
.ArgumentField("Language")
.ValueField("Percent")
.Label(l => l
.Visible(true)
.Connector(c => c
.Visible(true)
.Width(0.5)
)
.Format(Format.FixedPoint)
.CustomizeText(@<text>
function (point) {
return point.argumentText + ": " + point.valueText + "%";
}
</text>)
)
.SmallValuesGrouping(g => g
.Mode(SmallValuesGroupingMode.SmallValueThreshold)
.Threshold(4.5)
)
)
.DataSource(Model)
)
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 PieWithSmallValuesGrouped() {
return View(SampleData.LanguagesPercentage);
}
}
}
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<object> LanguagesPercentage = new[] {
new { Language = "English", Percent = 55.5 },
new { Language = "Chinese", Percent = 2.8 },
new { Language = "Spanish", Percent = 4.6 },
new { Language = "Japanese", Percent = 5.0 },
new { Language = "Portuguese", Percent = 2.5 },
new { Language = "German", Percent = 5.8 },
new { Language = "French", Percent = 4.0 },
new { Language = "Russian", Percent = 5.9 },
new { Language = "Italian", Percent = 1.9 },
new { Language = "Polish", Percent = 1.7 },
new { Language = "Turkish", Percent = 1.5 },
new { Language = "Dutch", Percent = 1.3 },
new { Language = "Persian", Percent = 0.9 },
new { Language = "Arabic", Percent = 0.8 },
new { Language = "Korean", Percent = 0.7 },
new { Language = "Czech", Percent = 0.7 },
new { Language = "Swedish", Percent = 0.5 },
new { Language = "Vietnamese", Percent = 0.4 },
new { Language = "Indonesian", Percent = 0.4 },
new { Language = "Greek", Percent = 0.4 },
new { Language = "Romanian", Percent = 0.4 },
new { Language = "Hungarian", Percent = 0.3 },
new { Language = "Danish", Percent = 0.3 },
new { Language = "Thai", Percent = 0.3 },
new { Language = "Finnish", Percent = 0.2 },
new { Language = "Slovak", Percent = 0.2 },
new { Language = "Bulgarian", Percent = 0.2 },
new { Language = "Norwegian", Percent = 0.2 },
new { Language = "Hebrew", Percent = 0.1 },
new { Language = "Lithuanian", Percent = 0.1 },
new { Language = "Croatian", Percent = 0.1 },
new { Language = "Ukrainian", Percent = 0.1 },
new { Language = "Norwegian Bokmål", Percent = 0.1 },
new { Language = "Serbian", Percent = 0.1 },
new { Language = "Catalan", Percent = 0.1 },
new { Language = "Slovenian", Percent = 0.1 },
new { Language = "Latvian", Percent = 0.1 },
new { Language = "Estonian", Percent = 0.1 }
};
}
}
#pie {
height: 440px;
}