[CLOSED] [#228] Scatter series label - fit into chart

  1. #1

    [CLOSED] [#228] Scatter series label - fit into chart

    Hello,

    The problem is that the scatter series label goes out of chart's rendered area if the value equals to the axis maximum value. Do you have a workaround to align label text (except inreasing X axis maximum value)?

    Thanks.

    Figure: Click image for larger version. 

Name:	scatterlabel.png 
Views:	22 
Size:	18.4 KB 
ID:	6137

    Sample code:

    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.TestData();
                this.Store1.DataBind();
            }
        }
        private List<object> TestData()
        {
            List<object> data = new List<object>
                {
                    new {
                            ID = 0,
                            Name = "Item 01",
                            XVal = 1,
                            Data1 = 1
                        },
                    new {
                            ID = 1,
                            Name = "Item 02",
                            XVal = 2,
                            Data1 = 2                       
                        },
                    new {
                            ID = 2,
                            Name = "Item 03",
                            XVal = 3,
                            Data1 = 3                      
                        },
                    new {
                            ID = 3,
                            Name = "Item 04",
                            XVal = 4,
                            Data1 = 4                       
                        },
                    new {
                            ID = 4,
                            Name = "Item 05",
                            XVal = 5,
                            Data1 = 5                      
                        }                        
                };
            return data;
        }
    </script>
    <script type="text/javascript">
    </script>
    
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Scatter Series Labels</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" />    
        <ext:Panel ID="Panel1" runat="server" Width="800" Height="500" Layout="FitLayout">        
            <Items>            
                <ext:Chart ID="Chart1" runat="server" StyleSpec="background:#fff;" Animate="false" Flex="1" Legend="true">
                    <Store>
                        <ext:Store ID="Store1" runat="server">
                            <Model>
                                <ext:Model ID="Model1" runat="server" IDProperty="ID">
                                    <Fields>
                                        <ext:ModelField Name="ID" Type="Int" />
                                        <ext:ModelField Name="XVal" Type="Int" />
                                        <ext:ModelField Name="Name" Type="String" />
                                        <ext:ModelField Name="Data1" Type="Int"/>
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:NumericAxis Title="Vaue Y" Fields="Data1" Position="Left" Minimum="0" Maximum="10">                                         
                        </ext:NumericAxis>
                        <ext:NumericAxis Title="Value X" Position="Bottom" Minimum="0" Maximum="5">                                                                   
                        </ext:NumericAxis>
                    </Axes>
                    <Series>
                        <ext:ScatterSeries Axis="Bottom" XField="XVal" YField="Data1">
                            <MarkerConfig Type="Circle" Radius="7" Size="7" />
                            <HighlightConfig Size="10" Radius="10" />      
                            <Label Display="Over" Field="Name" Orientation="Horizontal" FontSize="10"></Label>         
                            <Tips TrackMouse="true" Width="100">
                                <Renderer Handler="this.setTitle(storeItem.data.Name);"></Renderer>
                            </Tips>     
                        </ext:ScatterSeries>
                    </Series>
                </ext:Chart>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by Baidaly; May 31, 2013 at 2:27 AM. Reason: [CLOSED]
  2. #2
    Hi @bayoglu,

    Yes, it is a problem. I reported to Sencha.
    http://www.sencha.com/forum/showthread.php?262721

    Do you have a workaround to align label text (except inreasing X axis maximum value)?
    Unfortunately, I can't see any other workaround at the moment.
  3. #3
    @slemmon said:
    Looks like this is fixed in the latest 4.2.1 Nightly build.
    So, it will come to Ext.NET with the ExtJS 4.2.1 final release.

    I created an Issue to track it.
    https://github.com/extnet/Ext.NET/issues/228
  4. #4
    Hello!

    The issue appears to be fixed in the SVN trunk. Please update.

Similar Threads

  1. Replies: 13
    Last Post: Apr 26, 2016, 10:11 PM
  2. [OPEN] [#227] Scatter series label problem
    By bayoglu in forum 2.x Premium Help
    Replies: 4
    Last Post: May 08, 2013, 10:59 AM
  3. Replies: 2
    Last Post: May 01, 2013, 4:14 PM
  4. [CLOSED] [#8] Chart: Hide Line Series values
    By cwolcott in forum 2.x Premium Help
    Replies: 12
    Last Post: Mar 14, 2013, 5:41 AM
  5. [CLOSED] chart series double click event
    By SymSure in forum 2.x Premium Help
    Replies: 4
    Last Post: Sep 04, 2012, 2:03 PM

Posting Permissions