[OPEN] [#1379] [4.1.0] Hiding labels on polar 3D pie chart

  1. #1

    [OPEN] [#1379] [4.1.0] Hiding labels on polar 3D pie chart

    I would like to hide the labels, but not the legend. How do I achieve this?
    Last edited by Edgar; Sep 08, 2016 at 12:59 PM.
  2. #2
    Hello Edgar!


    Maybe I ddidn't understand your question, but I have no labels on the pie chart yet the legend shows just fine in the sample below:

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Refresh(object sender, EventArgs e)
        {
            this.Chart1.GetStore().DataBind();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Pie 3D Chart - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <script>
            var refresh = function() {
                var chart = this.up('panel').down('polar'),
                    store = chart.getStore();
    
                chart.setAnimation({
                    duration: 500,
                    easing: 'easeInOut'
                });
                store.reload();
            };
    
            var switchTheme = function () {
                var panel = this.up().up(),
                    chart = panel.down('polar'),
                    currentThemeClass = Ext.getClassName(chart.getTheme()),
                    themes = Ext.chart.theme,
                    themeNames = [],
                    currentIndex = 0,
                    name;
    
                for (name in themes) {
                    if (Ext.getClassName(themes[name]) === currentThemeClass) {
                        currentIndex = themeNames.length;
                    }
                    if (name !== 'Base' && name.indexOf('Gradients') < 0) {
                        themeNames.push(name);
                    }
                }
                chart.setTheme(themes[themeNames[++currentIndex % themeNames.length]]);
                chart.redraw();
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>Pie 3D Chart Example</h1>
    
            <p>This example shows how to create a 3D Pie chart.</p>
    
            <p>
                The example makes use of the 'rotate' interaction. To use it, click or tap and then
                drag anywhere on the chart.
            </p>
    
            <ext:Panel runat="server" Width="650" Height="500" Layout="FitLayout">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Refresh" OnDirectClick="Refresh" />
                            <ext:Button runat="server" Text="Switch Theme" Handler="switchTheme" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:PolarChart
                        ID="Chart1"
                        runat="server"
                        StandardTheme="Category1">
                        <Background Fill="white" />
                        <AnimationConfig Duration="500" Easing="EaseIn" />
                        <Store>
                            <ext:Store
                                runat="server"
                                Data="<%# Ext.Net.Examples.ChartData.GenerateData(6) %>"
                                AutoDataBind="true">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Data1" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <LegendConfig runat="server" />
                        <Interactions>
                            <ext:RotatePie3DInteraction />
                        </Interactions>
                        <Series>
                            <ext:Pie3DSeries
                                AngleField="Data1"
                                Donut="30"
                                Distortion="0.6">
                                <StyleSpec>
                                    <ext:SeriesSprite StrokeStyle="white" Opacity="0.9" />
                                </StyleSpec>
                            </ext:Pie3DSeries>
                        </Series>
                    </ext:PolarChart>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
    Note: the generateData() function is the same defined in examples explorer.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    I should have included an example.

    I want the legend to have 3m Co, Alcoa Inc etc., but no labels on the chart itself.

    If I use your set up, I get no labels on the chart, but the legend has Calls1, Calls2 etc.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
       <title></title>
       <script runat="server">
          protected void Page_Load( object sender, EventArgs e )
          {
             if ( !X.IsAjaxRequest )
             {
                this.storeDestinations.DataSource = this.Data;
                this.storeDestinations.DataBind();
             }
          }
    
          private object[] Data
          {
             get
             {
                return new object[]
                {
                    new object[] { "3m Co", 270 },
                    new object[] { "Alcoa Inc", 253 },
                    new object[] { "Altria Group Inc", 217 },
                    new object[] { "American Express Company", 58 },
                    new object[] { "American International Group, Inc.", 53 },
                    new object[] { "AT&T Inc.", 30 },
                    new object[] { "Boeing Co.", 24 },
                    new object[] { "Caterpillar Inc.", 21 },
                    new object[] { "Citigroup, Inc.", 14 },
                    new object[] { "Exxon Mobil Corp",180 }
                };
             }
          }
       </script>
    </head>
    <body>
       <form id="form1" runat="server">
          <ext:ResourceManager runat="server" />
    
          <ext:Panel runat="server" Width="650" Height="500" Layout="FitLayout">
             <Items>
                <ext:PolarChart ID="chartDestinations" runat="server" Animation="true" Shadow="true" Flex="1">
                   <Background Fill="#FFFFFF"></Background>
                   <LegendConfig runat="server" Dock="Right" BoxStrokeWidth="0" />
                   <Store>
                      <ext:Store ID="storeDestinations" runat="server">
                         <Model>
                            <ext:Model ID="Model1" runat="server">
                               <Fields>
                                  <ext:ModelField Name="Destination"></ext:ModelField>
                                  <ext:ModelField Name="Calls"></ext:ModelField>
                               </Fields>
                            </ext:Model>
                         </Model>
                      </ext:Store>
                   </Store>
                   <Interactions>
                      <ext:RotatePie3DInteraction />
                   </Interactions>
                   <Series>
                      <ext:Pie3DSeries Donut="40" AngleField="Calls" ShowInLegend="true" Highlight="true" Colors="#94AE0A,#115FA6,#A61120,#FF8809,#FFD13E,#A61187,#24AD9A,#7C7474,#A66111,#222222">
                         <Label Field="Destination" Display="Rotate" Font="16px Arial">
                            <Renderer Handler="return '';"></Renderer>
                         </Label>
                         <Tooltip ID="Tips1" TrackMouse="true" runat="server" Width="220" Height="28" >
                            <Renderer Handler="toolTip.setHtml(record.get('Destination') + ': ' + record.get('Calls'));"></Renderer>
                         </Tooltip>
                         <Listeners>
                            <ItemClick Handler="alert('ItemClick');"></ItemClick>
                         </Listeners>
                      </ext:Pie3DSeries>
                   </Series>
                   <Plugins>
                      <ext:ChartItemEvents runat="server" />
                   </Plugins>
                </ext:PolarChart>
             </Items>
          </ext:Panel>
       </form>
    </body>
    </html>
    Last edited by Edgar; Sep 14, 2016 at 8:35 AM.
  4. #4
    Hello Edgar!

    Thanks for reporting the issue! It really helps, always, to provide a simple test case with your question. The sillier it may look, always there's room for differences if no actual code is provided.

    We've logged the issue as #1379 in our GitHub bug tracker, this problem has already been fixed in the latest, to-be-released ExtJS versions 6.0.3 and 6.2.0, so soon we'll be merging it with our version of Ext.NET.

    Meanwhile, you can just add this override to completely inhibit label output from your chart:

    <script type="text/javascript">
        Ext.define('Ext.chart.series.Pie3D', {
            override: 'Ext.chart.series.Pie3D',
            updateLabelData: function () {
                return true;
            }
        });
    </script>
    I hope this should do for now!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Thanks Fabricio!

Similar Threads

  1. Replies: 0
    Last Post: Apr 30, 2015, 7:56 PM
  2. [CLOSED] Multiple labels on chart x-axis
    By Woodhac in forum 3.x Premium Help
    Replies: 1
    Last Post: Apr 08, 2015, 10:41 PM
  3. [CLOSED] Line Chart Labels z-index?
    By prointernet in forum 2.x Premium Help
    Replies: 1
    Last Post: Aug 22, 2013, 6:18 PM
  4. Replies: 3
    Last Post: Feb 18, 2013, 6:21 AM
  5. [CLOSED] Hiding Labels within Anchor (FormLayout)
    By Steve in forum 1.x Premium Help
    Replies: 3
    Last Post: Feb 24, 2009, 12:50 AM

Posting Permissions