[CLOSED] Scale on numeric X-axis not correct when having multiple line series

  1. #1

    [CLOSED] Scale on numeric X-axis not correct when having multiple line series

    When using 2 numeric axes for multiple line series, if the Maximum and Minimum is not specified, the scale on the X-axis is not correct. I think it this more likely ExtJS issue. Here is the code to reproduce the problem. Please do mouse over on the datapoint and you will see the X values are not corresponding to the X-axis, however the Y-axis is correct. This won't happen when there is only one line series. Thanks

    <%@ Page Language="C#"  %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <script runat="server">
       
       
        [DirectMethod]
        public void loadData()
        {
            strData.Data = new object[] {
                new {
                    xvalue =2.00031,
                    yvalue=10.234  ,
                    xvalue2 =2.50031,
                    yvalue2=10.234      
                },
                  new {
                      xvalue =2.50031,
                    yvalue=11.234   ,
                    xvalue2 =3.50031,
                    yvalue2=12.234       
                    
                },
                   new {
                      xvalue =3.50031,
                    yvalue=13.334   ,
                    xvalue2 =4.80031,
                    yvalue2=13.234       
                    
                }, new {
                    xvalue =4.20031,
                    yvalue=15.234   ,
                    xvalue2 =8.50031,
                    yvalue2=16.234     
                },
                  new {
                      xvalue =5.00031,
                    yvalue=16.234  ,
                    xvalue2 =12.50031,
                    yvalue2=20.234        
                    
                },
                   new {
                      xvalue =7.80031,
                    yvalue=18   ,
                    xvalue2 =15.50031,
                    yvalue2=21.234       
                    
                }
                
            };
    
            strData.DataBind(); 
    
        }
      
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
           <ext:Panel runat="server"     >
           <Items>
                        <ext:Chart 
                        ID="chtRiskReturn" 
                        runat="server"
                        Shadow="true"  
                        Animate="false"                    
                         StyleSpec="background:#fff"              
                        Width="1024" Height="400" Flex="1" >
                     
                        <LegendConfig Position="Right"  >
                          
                        </LegendConfig>
                        <Store>
                            <ext:Store ID="strData" 
                                runat="server"                          
                                AutoDataBind="true">                           
                                <Model>
                                    <ext:Model ID="Model2" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="xvalue" />
                                            <ext:ModelField Name="yvalue" />
                                          
                                          <ext:ModelField Name="xvalue2" />
                                            <ext:ModelField Name="yvalue2" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <Axes>
                            <ext:NumericAxis   
                                Fields="yvalue, yvalue2"                          
                                 Title="Y"                            
                                Position="Left"
                                
                                >
                                <GridConfig>
                                    <Odd Opacity="1" Fill="#ddd" Stroke="#bbb" StrokeWidth="0.5" />
                                </GridConfig>
                            </ext:NumericAxis>                            
    
                            
                            <ext:NumericAxis
                              Fields="xvalue, xvalue2"
                                Title="X"
                                Position="Bottom"
                                Grid="true"  
                                MajorTickSteps="9"
                             
    
                                />                            
                        </Axes>
                        <Series>
                            <ext:LineSeries  Highlight="true"  YField="yvalue" Title="line1" XField="xvalue" ShowMarkers="true"   Axes="Left, Bottom">
                                <Tips TrackMouse="true" Width="120" Height="40">
                                 <Renderer Fn="
                                         function(storeItem, item) {
                                           
                                             this.setTitle('X: ' + storeItem.get('xvalue').toFixed(2) + '<br /> Y: ' + storeItem.get('yvalue').toFixed(2)  + '%');
                                            }
                                         
                                    "></Renderer> 
                                </Tips>
                                <HighlightConfig Size="3" Radius="3"  />
                                <MarkerConfig Type="Diamond" Size="2" Radius="2" StrokeWidth="1" StrokeLinejoin="Round" DominantBaseline="Mathematical" />
                            </ext:LineSeries>
    
                             <ext:LineSeries Axes="Left, Bottom" XField="xvalue2" YField="yvalue2" Title="Line2" ShowMarkers="true"  >
                                 <Tips TrackMouse="true" Width="120" Height="40">
                                 <Renderer Fn="
                                         function(storeItem, item) {
                                           
                                             this.setTitle('X: ' + storeItem.get('xvalue2').toFixed(2) + '<br /> Y: ' + storeItem.get('yvalue2').toFixed(2)  + '%');
                                            }
                                         
                                    "></Renderer> 
                                </Tips>
                               
                            </ext:LineSeries>
    
                        </Series>
                    </ext:Chart>
                      <ext:Button runat="server" Text="load data" >
                      <Listeners>
                        <Click Handler="#{DirectMethods}.loadData();"></Click>
                      </Listeners>
                      
                      </ext:Button> 
    </Items>
    </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jul 16, 2012 at 9:40 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Thanks for the report. Confirm, it is reproducible with v2.0. But I have just test with v2.1 and the issue is gone.

    Recently, we have updated the v2.1 to just released ExtJS 4.1.1 GA. Some charts bugs have been fixed and, actually, this one we are discussing here.

    We won't upgrade the v2.0 to ExtJS 4.1.1, therefore, the bug will stay in v2.0. So, we recommend to update to v2.1.
  3. #3
    Thanks for your quick reply :)

    Is 2.1 in the SVN?
  4. #4

Similar Threads

  1. [CLOSED] [#28] Change style of axis title
    By jchau in forum 2.x Premium Help
    Replies: 7
    Last Post: Dec 29, 2012, 11:09 AM
  2. [CLOSED] Text on Series and Tool tips for Grouped Bar Chart
    By WHISHWORKS in forum 2.x Premium Help
    Replies: 3
    Last Post: Jul 16, 2012, 10:59 AM
  3. [CLOSED] Area chart starting axis
    By Fahd in forum 2.x Premium Help
    Replies: 1
    Last Post: Jul 05, 2012, 8:56 PM
  4. [CLOSED] Button Scale? What does it do?
    By wagger in forum 1.x Premium Help
    Replies: 3
    Last Post: Apr 07, 2011, 7:38 PM
  5. [CLOSED] Multiple Tab Strips in line, with Container
    By rnachman in forum 1.x Premium Help
    Replies: 1
    Last Post: Mar 31, 2011, 9:03 AM

Tags for this Thread

Posting Permissions