[CLOSED] column chart label line wrapping

  1. #1

    [CLOSED] column chart label line wrapping

    I'm trying to have the labels in the x-axis wrap instead of just truncating them. I've got up to the following sample code and please show me how to accomplish this. Thanks

    (note: while writing the following sample code I find a problem of the first element in the list not showing in the chart. May be something also to look at?)

    <%@ Page Language="C#" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    
    <script runat="server">
       
        protected void Page_Load(object sender, EventArgs e)
        {
            strCoreCollectives.Data = new object[] {
                new {
                    instCode="1234567890",
                    instName="test12345678901234567890",
                    amount=10000,
                    instPerc=10        
                },
                   new {
                      instCode="3234567890",
                    instName="test32345678901234567890",
                    amount=30000,
                    instPerc=30        
                    
                },
                
                new {
                      instCode="2234567890",
                    instName="test22345678901234567890",
                    amount=20000,
                    instPerc=20        
                    
                }
                
            };
    
            strCoreCollectives.DataBind(); 
    
        }
      
    </script>
    
    <!DOCTYPE html>
    
    <html>
    
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
         
        
    
                   <ext:Panel ID="Panel1" runat="server" >
                <Items>
              <ext:Chart 
                        ID="Chart4" 
                        runat="server"
                        StyleSpec="background:#fff;"                   
                        Shadow="true"
                        Animate="true"
                         Width="300"
                        Height="300"     
                         Theme="Base:gradients"     
                        >                    
                      
                        <Store>
                            <ext:Store ID="strCoreCollectives" runat="server" AutoDataBind="true">
                                <Model>
                                   <ext:Model ID="Model12" runat="server"  IDProperty="instCode">
                                        <Fields>                   
                                                           
                                            <ext:ModelField Name="instCode"  />
                                            <ext:ModelField Name="instName"  />
                                            <ext:ModelField Name="amount" Type="Float"/>
                                            <ext:ModelField Name="instPerc" Type="Float"  />
                                                                          
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                          <Axes>
                          <ext:CategoryAxis 
                                Fields="instName"                            
                                Title="Instruments"
                                Position="Bottom"                               
                                >    
                                <LabelTitle FontSize="10"   >
                                    
                                </LabelTitle>
                                <Label FontSize="8" >
                                
                                            <Rotate Degrees="270" />
                                           <Renderer Handler="return Ext.String.ellipsis(value, 15, false);"  />
                                        </Label>    </ext:CategoryAxis>
                                     
                            <ext:NumericAxis                             
                                Fields="amount"
                                Position="Left"
                                Grid="true"
                                Title="Amount" 
                                >
                                    <LabelTitle FontSize="10" >
                                    
                                </LabelTitle>
                                <Label FontSize="8" ></Label>
                                </ext:NumericAxis>
                                       
                    </Axes>
                     <Series>
                           <ext:ColumnSeries                   
                                Highlight="true" 
                                XField="instName"
                                YField="amount"
                                Axes="Left" Column="true"
                            ></ext:ColumnSeries>
                            </Series>
                    </ext:Chart>
         
                
                </Items>
            
            
            </ext:Panel>
             
    
        </form>
      </body>
    </html>
    Last edited by Daniil; Jul 05, 2012 at 12:12 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Quote Originally Posted by CarpFisher View Post
    I'm trying to have the labels in the x-axis wrap instead of just truncating them. I've got up to the following sample code and please show me how to accomplish this.
    Could you clarify what exactly you mean under "the labels in the x-axis wrap instead of just truncating"? It's truncating due to:
    <Renderer Handler="return Ext.String.ellipsis(value, 15, false);"  />
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.String-method-ellipsis

    If you would remove that Renderer, the labels won't be truncated ("ellipsed").

    Quote Originally Posted by CarpFisher View Post
    (note: while writing the following sample code I find a problem of the first element in the list not showing in the chart. May be something also to look at?)
    Well, by default the Minimum of the NumericAxis is the minimum of its values, i.e. 10000 in your cause. Therefore the first column is not visible.

    You could explicitly set up the NumericAxis Minimum, for example:
    Minimum="0"
  3. #3
    Thanks for the reply. Yes, I put that ellipsis function because I don't have enough space. However I want to remove that function and have wrapped text instead. I was trying to use the style "white-space: normal" but doesn't work.

    For the minimum it doesn't make sense to have a default minimum equals to the lowest value for column charts. If that is true then there is always a column that is empty.
  4. #4
    Quote Originally Posted by CarpFisher View Post
    Thanks for the reply. Yes, I put that ellipsis function because I don't have enough space. However I want to remove that function and have wrapped text instead. I was trying to use the style "white-space: normal" but doesn't work.
    I am afraid I still don't understand the requirement. Please clarify what do you mean under "wrapped text"? How should it look? Do not you need to see the full labels?

    Quote Originally Posted by CarpFisher View Post
    For the minimum it doesn't make sense to have a default minimum equals to the lowest value for column charts. If that is true then there is always a column that is empty.
    Maybe you are right. Though, anyways, you should set up some Minimum explicitly.
  5. #5
    sorry for the unclear description.... I would like the label to wrap into multiple lines rather than a single long line. use the CSS white-space: normal on the element normally do it but not in this situation.....Thanks
  6. #6
    Well, the chart is SVG (or VML in <= IE8). If SVG the labels are presented by <text> and <tspan> elements. They don't deal with CSS white-space rule.
    http://www.w3.org/TR/SVG/text.html#TextElement
  7. #7
    looks like it is not easy. From the W3 documents it looks like we have to use multiple tspan elements in the SVG. Now here is my question: is that possible to control/override the ExtJS library on how those labels SVG have been generated?

    There must be people having the same challenge as mine but I don't seem to find a solution in Google. Should I post this to the ExtJS forum?
  8. #8
  9. #9
    Thank you very much for your effort anyway :)
  10. #10
    No problem. I will keep it in mind. If such possibility will appear, I will try to notify you.

Similar Threads

  1. [CLOSED] Chart Line
    By pdcase in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Aug 14, 2012, 3:25 PM
  2. Line chart grouping of dates on x-asis
    By nomz in forum 2.x Help
    Replies: 1
    Last Post: Jun 08, 2012, 3:01 PM
  3. How to change a line style on the chart?
    By Natalie in forum 2.x Help
    Replies: 3
    Last Post: May 16, 2012, 11:15 AM
  4. [CLOSED] Label on the same line of buttons in window
    By xeo4.it in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 13, 2011, 11:13 AM
  5. grid column text wrapping
    By [WP]joju in forum 1.x Help
    Replies: 0
    Last Post: Nov 18, 2009, 3:32 AM

Tags for this Thread

Posting Permissions