[FIXED] [#1272] [3.3.0] PolarChart(with Pie3DSeries) Label, LegendConfig Issue

  1. #1

    [FIXED] [#1272] [3.3.0] PolarChart(with Pie3DSeries) Label, LegendConfig Issue

    I have trouble showing legendconfig and label in PolarChart(with Pie3DSeries)
    In our project, PolarChart(with Pie3DSeries) is used in various ways.
    So it is thankful if you give me some advices or examples about that.

    [CODE]
    [C#]
    protected void Page_Load(object sender, EventArgs e)
            {
                this.BindData();
            }
    
    private void BindData(int counter = -1)
            {
                var data = new List<Status>
                {
                    new Status { Type = "Delay1", Count = 3  },
                    new Status { Type = "Delay2", Count = 5  },
                    new Status { Type = "Delay3", Count = 45  },
                };
    
                this.Chart1.GetStore().DataSource = data;
                this.Chart1.GetStore().DataBind();
    
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
    
    [HTML]
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager runat="server" />
            <ext:Panel runat="server" Width="750" Height="450" Layout="AbsoluteLayout">
                <Items>
                    <ext:PolarChart
                        ID="Chart1"
                        runat="server"
                        StandardTheme="Category1"
                        X="50"
                        Width ="280"
                        Height="400">
                        <LegendConfig Dock="Bottom" runat="server" />
                        <Background Fill="white" />
                        <AnimationConfig Duration="500" Easing="EaseIn" />
                        <Store>
                            <ext:Store runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Type" />
                                            <ext:ModelField Name="Count" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <Interactions>
                            <ext:RotatePie3DInteraction />
                        </Interactions>
                        <Series>
                            <ext:Pie3DSeries
                                XField="Count" YField="Type"
                                Donut="30"
                                Distortion="0.6" Colors="#BD0000,#F5EF0C,#006EBD">
                                <Label Field="Count" Display="Outside" Font="8px Arial" TextAlign="Center"/> 
                                <StyleSpec>
                                    <ext:SeriesSprite StrokeStyle="white" Opacity="1.0" />
                                </StyleSpec>       
                            </ext:Pie3DSeries>
                        </Series>
                    </ext:PolarChart>
                </Items>
            </ext:Panel>
        </div>
        </form>
    </body>
    </html>
    Last edited by wonjin; Mar 04, 2016 at 12:05 AM.
  2. #2
    Hello @wonjin! Welcome to Ext.NET forums!

    Thanks for the runnable example showing your page and how far you went with it! I could get it running although I had to define the 'Status' class you didn't provide.

    The problem here is that the underlying framework, ExtJS 5.1.2, used in Ext.NET 3.3.0 does not support charts' legends at all. This applies for both Pie3D and also Bar3D. The other polar charts probably handle these settings well.

    The good news is that our to-be-released Ext.NET 4 works very well with it and, using it on default settings looks much nicer! You should give Ext.NET 4 preview a try!

    We've created (and closed) an issue just to document this problem under #1272.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    And here's how your example looks like in Ext.NET 4:

    Click image for larger version. 

Name:	60679-3dpie_en4.png 
Views:	66 
Size:	20.3 KB 
ID:	24468

    And below the code to get the result above. Some changes were made to your original code, notably adding the class definition and changing Ext.NET syntax to comply to 4.0.

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.BindData();
        }
    
        private void BindData(int counter = -1)
        {
            var data = new List<Status>()
                {
                    new Status { Type = "Delay1", Count = 3  },
                    new Status { Type = "Delay2", Count = 5  },
                    new Status { Type = "Delay3", Count = 45  },
                };
    
            this.Chart1.GetStore().DataSource = data;
            //this.Chart1.GetStore().DataBind();
        }
    
        public class Status
        {
            public string Type { get; set; }
            public int Count { get; set; }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Works in Ext.NET 4 (#1272)</title>
    </head>
    <body>
        Below, legend and labels works well (don't work in Ext.NET 3).
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager runat="server" />
            <ext:Panel runat="server" Width="750" Height="450" Layout="AbsoluteLayout">
                <Items>
                    <ext:PolarChart
                        ID="Chart1"
                        runat="server"
                        StandardTheme="Category1"
                        X="50"
                        Width ="280"
                        Height="400">
                        <LegendConfig Dock="Bottom" runat="server" />
                        <Background Fill="white" />
                        <AnimationConfig Duration="500" Easing="EaseIn" />
                        <Store>
                            <ext:Store runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Type" />
                                            <ext:ModelField Name="Count" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <Interactions>
                            <ext:RotatePie3DInteraction />
                        </Interactions>
                        <Series>
                            <ext:Pie3DSeries
                                AngleField="Count"
                                Donut="30"
                                ShowInLegend="true"
                                Distortion="0.6" Colors="#BD0000,#F5EF0C,#006EBD">
                                <StyleSpec>
                                    <ext:SeriesSprite StrokeStyle="white" Opacity="1.0" />
                                </StyleSpec>       
                            </ext:Pie3DSeries>
                        </Series>
                    </ext:PolarChart>
                </Items>
            </ext:Panel>
        </div>
        </form>
    </body>
    </html>
    Fabrício Murta
    Developer & Support Expert
  4. #4

    1 more question after applying your example in EXT.NET 4

    I used your example in EXT.NET 4.
    I think it looks much nicer.

    Dear Sir, I have 1 more question.
    <ext:ModelField Name="Type" />
    <ext:ModelField Name="Count" />
    Is there anyway to show Legendconfig : Type, Label : Count ?
    such like
    Click image for larger version. 

Name:	capture.JPG 
Views:	59 
Size:	12.3 KB 
ID:	24474

    I'll wait for your hopeful response ^^
    Thanks.
  5. #5
    Hello @wonjin!

    I'm not sure what to reply. As this question is slightly diverging to a more specific subject (on customizing, now displaying the legend) would you mind opening a new thread so we keep different subjects on different threads?

    On the new thread (if you agree on creating it), would you mind sharing not only this picture you already shown but also a picture pointing exactly where you expected the text example to be displayed in the chart?
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Apr 16, 2015, 9:38 PM
  2. [CLOSED] Center Polarchart in panel
    By rguardado in forum 3.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 15, 2015, 6:54 PM
  3. Scrollbar for LegendConfig on Chart
    By tk.Mageztik in forum 2.x Help
    Replies: 0
    Last Post: Aug 23, 2012, 11:35 PM
  4. [CLOSED] Change LegendConfig in Chart
    By osef in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 11, 2012, 12:17 AM
  5. 2.0 Chart - Update LegendConfig
    By Vladimir in forum 2.x Help
    Replies: 2
    Last Post: May 21, 2012, 6:21 AM

Tags for this Thread

Posting Permissions