[FIXED] [#454] TimeAxis Bug

Page 1 of 2 12 LastLast
  1. #1

    [FIXED] [#454] TimeAxis Bug

    Hi,
    timeAxis has a bug : month label is duplicated sometimes, and other month are missing: here is an example: the chart and the grid share the same store:
    Click image for larger version. 

Name:	Capture.png 
Views:	75 
Size:	21.8 KB 
ID:	8281
    Click image for larger version. 

Name:	Capture2.png 
Views:	62 
Size:	31.0 KB 
ID:	8291

    The store model is a datetime :
    new ModelField("periode", ModelFieldType.Date)
    The axis is build this way:

     TimeAxis axe2 = new TimeAxis()
                {
                    Fields = new string[] { "periode" },
                    Title = "Mois",
                    Position = Ext.Net.Position.Bottom,
                    DateFormat = "MMM yy",
                    Grid = false,
                    StepUnit = DateUnit.Month,
                    Label = new AxisLabel() { Rotate = new RotateAttribute() { Degrees = 270 } },
                    Step = 1
                };
    I tested with French culture.

    Have a nice day !
    Last edited by fabricio.murta; Apr 27, 2016 at 1:49 AM.
  2. #2
    Hi @brunweb,

    Could you, please, provide a full test case to reproduce the problem?
  3. #3
    Hi Daniil,
    here is a full example to reprodude the problem.

    This example produces this:
    Click image for larger version. 

Name:	Capture.png 
Views:	36 
Size:	17.7 KB 
ID:	8371
    Click image for larger version. 

Name:	Capture2.png 
Views:	45 
Size:	31.0 KB 
ID:	8381

    Please notice I added a tip to show the values : looks like they are wrong... at least not at the right place.

    Click image for larger version. 

Name:	Sans titre.png 
Views:	42 
Size:	83.4 KB 
ID:	8391

    Here is aspx code to reproduce
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>
    
    <!DOCTYPE html>
    
    <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:Viewport ID="Viewport1" Layout="border" runat="server">
                <Items>
                    <ext:Container ID="Container1" runat="server" Region="Center" Layout="FitLayout">
                        <LayoutConfig>
                            <%--                    <ext:VBoxLayoutConfig Align="Stretch" DefaultMargins="5 5 5 5" />--%>
                            <ext:FitLayoutConfig DefaultMargins="5 5 5 5" />
                        </LayoutConfig>
                        <Items>
                            <ext:TabPanel runat="server">
                                <Items>
                                    <ext:Panel ID="MyTabPanel" runat="server" Title="Demo OK" Layout="FitLayout" Margins="5" UI="Success">
                                        <TabConfig ID="TabConfig2" runat="server" UI="Success" />
                                    </ext:Panel>
                                    <ext:Panel ID="MyTabPanel2" runat="server" Title="Demo KO" Layout="FitLayout" Margins="5" UI="Success">
                                        <TabConfig ID="TabConfig1" runat="server" UI="Danger" />
                                    </ext:Panel>
                                </Items>
    
                            </ext:TabPanel>
                        </Items>
                    </ext:Container>
                </Items>
            </ext:Viewport>
    
    
    
    
    
        </form>
    </body>
    </html>
    And code behind too:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    namespace WebApplication1
    {
        public partial class WebForm2 : System.Web.UI.Page
        {
            public class Dummy
            {
                public DateTime dt { get; set; }
                public int val1 { get; set; }
                public int val2 { get; set; }
                public static Ext.Net.Store GetStore()
                {
    
                    return new Store
                    {
                        Model = 
                        { 
                            new Model 
                            {
                                Fields = 
                                        {
                                           new ModelField("dt", ModelFieldType.Date),
                                           new ModelField("val1", ModelFieldType.Int),
                                           new ModelField("val2", ModelFieldType.Int)
                                        }
                            }
                        }
    
                    };
    
                }
                public static Ext.Net.ItemsCollection<Ext.Net.ColumnBase> GetColumns()
                {
                    Ext.Net.ItemsCollection<Ext.Net.ColumnBase> Cols = new ItemsCollection<ColumnBase>
                    {
                        new DateColumn
                        {
                            Text = "Date", 
                            DataIndex = "dt",
                           Format="MMM Y",
                            Flex = 1
                        },
                        new Column
    
                        {
                            Text = "Value 1",
                            DataIndex = "val1"
                        },
                        new Column
    
                        {
                            Text = "Value 2",
                            DataIndex = "val2"
                        }
                        
                    };
    
    
                    return Cols;
                }
    
    
            };
            protected void Page_Load(object sender, EventArgs e)
            {
                // creating a dummy store
    
                List<Dummy> mylist = new List<Dummy>();
                DateTime baseDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
                for (int i = 0; i < 24; i++)
                {
                    mylist.Add(new Dummy()
                    {
                        dt = baseDate.AddMonths(-i),
                        val1 = i,
                        val2 = (i+1) * 2
                    });
                }
    
                //creating a gridpabnel to see store data
                GridPanel gp = new GridPanel()
                {
                    Border = true,
                    Title = "Working OK",
                    MarginSpec = "0 0 3 0",
                   Flex=1,
                    SelectionModel = 
                    { 
                        new RowSelectionModel() { Mode = SelectionMode.Multi }
                    },
    
                    View =
                    {
                       new Ext.Net.GridView()
                       {
                            StripeRows = true,
                            TrackOver = true 
                       }
                    }
                };
    
                //store will be same for gridpanel and graph
                Store myStore = Dummy.GetStore();
                myStore.ID = "dummyStore";
                myStore.DataSource = mylist;
                gp.ColumnModel.Add(Dummy.GetColumns());
                gp.Store.Add(myStore);
              
               // this.Container1.Items.Add(gp);
                gp.AddTo(this.MyTabPanel);
                //graph
    
                Chart ch = new Chart()
                {
                   
                    Animate = true,
                    Shadow = true,
                    InsetPadding = 10,
                    Theme = "Base:gradiant",
                    StoreID = myStore.ID,
                    LegendConfig = new ChartLegend.Config() { Position = LegendPosition.Bottom },
                    Legend = true,
                };
    
                ColumnSeries ar1 = new ColumnSeries()
                {
                   Tips = new ChartTip(),
                    Highlight = true,
                    XField = new string[] { "dt" },
                    YField = new string[] { "val1","val2" },
                    Titles = new string[] { "Value 1", "Value 2" },
                    ShowInLegend = true,
                    Axis = Ext.Net.Position.Left
                };
                //added this to see that value is OK
                ar1.Tips.UI = UI.Danger;
               ar1.Tips.TrackMouse = true;
               ar1.Tips.BodyStyle = "text-align:center; font-size:12px;";
               ar1.Tips.Renderer.Handler = "this.update( Ext.Date.format(storeItem.get('dt'), 'm Y') + '<hr> Value 1 : ' +storeItem.get('val1') + '<hr>Value 2: ' + storeItem.get('val2'));";
         
                NumericAxis axe1 = new NumericAxis() { 
                    Fields = new string[] { "val1", "val2" },
                    Position = Ext.Net.Position.Left,
                    Title = "Euros",
                    Minimum = 0 };
                ch.Axes.Add(axe1);
                
               
                TimeAxis axe2 = new TimeAxis()
                {
                    Fields = new string[] { "dt" },
                    Title = "Month",
                    Position = Ext.Net.Position.Bottom,
                    DateFormat = "MMM yy",
                    Grid = false,
                    StepUnit = DateUnit.Month,
                    Label = new AxisLabel() { 
                        Rotate = new RotateAttribute() { Degrees = 270 }
                    },
                    Step = 1
                };
    
                ch.Axes.Add(axe2);
                ch.Series.Add(ar1);
                Ext.Net.Panel panCA = new Ext.Net.Panel() { 
                    Title = "CA / Marge", 
                    Layout = "FitLayout", 
                    Flex = 1,
                    MinHeight =300,
                    Icon = Ext.Net.Icon.ChartBar
                };
                panCA.Items.Add(ch);
    
              //  this.Container1.Items.Add(panCA);
                panCA.AddTo(this.MyTabPanel2);
    
            }
        }
    }
    I think the two erros might be linked ...

    Thanks for your help
  4. #4
    Another clue : if we take the above code and just change :
    DateFormat = "MMM yy", to DateFormat = " dd MMM yy", for the timeAxis here is what it does (we do keep StepUnit = DateUnit.Month):
    Click image for larger version. 

Name:	Capture.png 
Views:	44 
Size:	14.9 KB 
ID:	8451

    ==> so a part of the error is i believe because DateUnit.Month seems to consider = 30 days... what is of course wrong.

    Other weird issue : in the above code, sort the grid by date in a way ot another : we see the graph changing... why ?
    I believe there are several erros in thimeAxis ... or maybe in my code !
  5. #5
    I found a possile workaround : i'll post it below because I think it can help : this is an "old" ext.js bug ... with still no fix.

    Please also note that the ext.js doc says here :
    Use this axis for listing dates that you will want to group or dynamically change. If you just want to display dates as categories then use the Category class for axis instead.
    From my point of vue, this makes no sens a all : categories sort alphabetically, dates don't...

    Anyway, here is the work around i found: in the above example, replace the TimeAxis with a CategoryAxis with a custom renderer :
     CategoryAxis axe2 = new CategoryAxis()
                {
                     Fields = new string[] { "dt" },
                    Title = "Month",
                    Position = Ext.Net.Position.Bottom,
                    Grid = false,
                    AutoDataBind = true,
                    Label = new AxisLabel()
                    {
                        Rotate = new RotateAttribute() { Degrees = 270 },
                    }
                };
                axe2.Label.Renderer.Handler = "return Ext.util.Format.date(value,'M Y');";
    graph is now OK... except when store is sorted by any other value : our "pseudoTimeAxis" means nothing...

    Anyway, i found this bug reported on other forums, and I must say this behaviour makes TimeAxis barelly unusable : most charts DO have a date in at least one axis...
    Hope this workaround can help others !

    Have a nice day !
  6. #6
    Thank you for your investigation.

    Quote Originally Posted by brunweb View Post
    Anyway, i found this bug reported on other forums
    Could you, please, post a link? Then we could create an Issue, refer to that link and review in the future. Seems it is all that we (Ext.NET) could do with that issue for now.
  7. #7
    Hi, here is a links:
    http://www.sencha.com/forum/showthre...ling-correctly

    I found others when investigating but i can't find them anymore...
  8. #8
    Quote Originally Posted by brunweb View Post
    I found others when investigating but i can't find them anymore...
    Have you seen any open bugs on this topic?
  9. #9
    I don't remember seing any
  10. #10
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 4
    Last Post: Dec 10, 2013, 5:41 PM
  2. TimeAxis step
    By dnagy in forum 2.x Help
    Replies: 1
    Last Post: Nov 30, 2013, 1:20 AM
  3. Replies: 2
    Last Post: Sep 10, 2013, 9:40 AM
  4. [CLOSED] Time in FromDate and ToDate TimeAxis
    By xeo4.it in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Jul 16, 2013, 12:21 PM
  5. Chart TimeAxis FromDate ToDate problem
    By bovo13 in forum 2.x Help
    Replies: 0
    Last Post: Dec 12, 2012, 9:15 AM

Posting Permissions