Mar 25, 2020, 9:23 PM
Hello again, @pvera!
Here, what I gathered from all your code:
model: namespace
controller: namespace
view:
I believe I've dropped everything that's not essential to reproduce the scenario; please try to run this at your side and see what I see from here (attaching the screenshot of the result).
From that point you can format the decimal values output as you will with, for example Ext.Number.toFixed() or other string/number formatting tool/code.
Hope this helps!
Here, what I gathered from all your code:
model: namespace
ExtNetPlaygroundMVC5_NuGet.Models
within a IssuesModel class, just for organization.public class C62863_ReportResponse
{
public string VCH_PROPERTY { get; set; }
public decimal DEC_VALUE { get; set; }
public decimal DEC_PERCENT { get; set; }
}
The class name also has a "C62863_" prefix just to ensure it won't conflict with other code in the project.controller: namespace
ExtNetPlaygroundMVC5_NuGet.Controllers
; IssuesController.public ActionResult c62863_PieChartPctLabel()
{
var viewModel = new List<IssuesModel.C62863_ReportResponse>()
{
new IssuesModel.C62863_ReportResponse
{
VCH_PROPERTY = "AIRLINE1",
DEC_VALUE = 8.3M,
DEC_PERCENT = 20.1M
},
new IssuesModel.C62863_ReportResponse
{
VCH_PROPERTY = "AIRLINE2",
DEC_VALUE = 13.5M,
DEC_PERCENT = 49.8M
},
new IssuesModel.C62863_ReportResponse
{
VCH_PROPERTY = "AIRLINE3",
DEC_VALUE = 11.8M,
DEC_PERCENT = 30.1M
}
};
return View(viewModel);
}
Again, the view got a c62863_ prefix to avoid conflicts and remind it pertains to this forum thread.view:
@model List<ExtNetPlaygroundMVC5_NuGet.Models.IssuesModel.C62863_ReportResponse>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Pie Chart, Percent display in slice labels</title>
<script type="text/javascript">
var vchpToPercent = function (text) {
var store = App.ManifestPieChartStore,
recIdx = store.find("VCH_PROPERTY", text);
if (recIdx >= 0) {
var record = store.getAt(recIdx);
return record.get("DEC_PERCENT") + "%";
} else {
return "#ERROR#";
}
}
</script>
</head>
<body>
@Html.X().ResourceManager()
@(
Html.X().PolarChart()
.ID("ManifestPieChart")
.Shadow(true)
.InsetPadding(20)
.InnerPadding(25)
.Width(500)
.Height(500)
.LegendConfig(Html.X().ChartLegend().Dock(Dock.Right).Width(50))
.Store(Html.X().Store()
.ID("ManifestPieChartStore")
.Model(Html.X().Model().Fields("VCH_PROPERTY", "DEC_VALUE", "DEC_PERCENT"))
.DataSource(Model)
)
.Series(Html.X().PieSeries()
.AngleField("DEC_PERCENT")
.ShowInLegend(true)
.Donut(20)
.Label(Html.X().ChartLabel()
.Field("VCH_PROPERTY")
.Renderer(r => r.Fn = "vchpToPercent")
)
)
)
</body>
</html>
You'd probably need to use the namespaces fitting your project's and rename accordingly if you want to run this at your side.I believe I've dropped everything that's not essential to reproduce the scenario; please try to run this at your side and see what I see from here (attaching the screenshot of the result).
From that point you can format the decimal values output as you will with, for example Ext.Number.toFixed() or other string/number formatting tool/code.
Hope this helps!