[CLOSED] Config style pie chart

Page 2 of 2 FirstFirst 12
  1. #11
    Hello again, @pvera!

    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).

    Click image for larger version. 

Name:	62823-202003251822-pieChart.png 
Views:	4 
Size:	17.0 KB 
ID:	25324

    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!
    Fabrício Murta
    Developer & Support Expert
  2. #12
    Hello Fabricio

    Thank you for your answer, it is what I was looking for.

    And sorry for not being so precise with the saying, I already understood how I should upload the examples.

    Best regards
  3. #13
    Hello again, @pvera!

    Glad we could help you in the end. Thanks for understanding; whenever a sample test case is possible, it gets much faster both to understand your issue and to communicate the right way to fix it. The solution here has been what I tried to point you from the start, from the given examples.

    So it is always a given, sample cases are more than often the way to go to describe and to have a solution for problems Ext.NET can solve.

    I'll be marking this thread as closed, if there's still anything missing, let us know.
    Fabrício Murta
    Developer & Support Expert
Page 2 of 2 FirstFirst 12

Similar Threads

  1. [CLOSED] Pie Chart
    By CanopiusApplications in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 19, 2016, 4:11 PM
  2. Pie Chart
    By CanopiusApplications in forum 2.x Help
    Replies: 0
    Last Post: Dec 15, 2016, 12:35 PM
  3. Problem in Pie chart
    By thanhnv2104 in forum 3.x Help
    Replies: 3
    Last Post: Jan 20, 2016, 6:25 PM
  4. Pie Chart from Code Behind
    By devgaipp in forum 2.x Help
    Replies: 0
    Last Post: Sep 18, 2012, 12:29 PM
  5. Pie chart example
    By Gamerome in forum 2.x Help
    Replies: 2
    Last Post: Sep 09, 2012, 7:17 PM

Posting Permissions