Results 1 to 4 of 4

Thread: bar chart loaded with ajax store, loaded in inactive card item (firefox only)

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Montreal, Canada
    Posts
    255
    Vote Rating
    7
      0  

    Default bar chart loaded with ajax store, loaded in inactive card item (firefox only)

    REQUIRED INFORMATION




    Ext version tested:
    • Ext 4.07

    Browser versions tested against:
    • IE9 (no problem)
    • Chrome 15.0.874.121 (no problem)
    • FF8 (firebug 1.8.4) (as problem)

    DOCTYPE tested against:
    • none specified
    • XHTML 1.0 Strict

    Description:
    Rendering bar chart with an Ajax store in inactive card panel generate multiple error in firefox
    The same setup with local store doesnt generate error.
    • Unexpected value NaN parsing x attribute.
    • Unexpected value NaN parsing y attribute
    • Unexpected value NaN parsing width attribute.
    • Unexpected value NaN parsing height attribute.

    Steps to reproduce the problem:
    Load test case in firefox (you will need to generate server side response for the ajax store) to generate the errors.


    The result that was expected:
    No error, properly displaying chart when card become active


    The result that occurs instead:
    When the window and its items are load several errors appears in the JS console and when the card containing the chart is activated, the chart doesn't look right.


    Test Case:


    Code:
    Ext.application({
        name:'SOL',
        appFolder:'/script',
        autoCreateViewport:false,
    
    
        launch:function () {
    
    
            Ext.define('sandboxValues', {
                extend:'Ext.data.Model',
                fields:['name', 'data1', 'data2', 'data3', 'data4', 'data5']
            });
    
    
            var ajaxStore = Ext.create('Ext.data.Store', {
                model:'sandboxValues',
                autoLoad:true,
                proxy:{
                    type:'ajax',
                    url:'values.php',
                    reader:{
                        type:'json'
                    }
                }
            });
    
    
            var store = Ext.create('Ext.data.JsonStore', {
                fields:['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
                data:[
                    { 'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13 },
                    { 'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3  },
                    { 'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7  },
                    { 'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23 },
                    { 'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33 }
                ]
            });
    
    
            var grid = Ext.create('Ext.grid.Panel', {
                width:500,
                height:350,
                title:'grid',
                store:store,
                columns:[
                    {
                        header:'Name',
                        dataIndex:'name'
                    },
                    {
                        header:'Monday',
                        dataIndex:'data1'
                    },
                    {
                        header:'Tuesday',
                        dataIndex:'data2'
                    },
                    {
                        header:'Wednesday',
                        dataIndex:'data3'
                    },
                    {
                        header:'Thursday',
                        dataIndex:'data4'
                    },
                    {
                        header:'Friday',
                        dataIndex:'data5'
                    }
                ]
            });
    
    
            var bar = Ext.create('Ext.chart.Chart', {
                width:500,
                height:350,
                title:'bar chart',
                animate:true,
                legend:{
                    position:'right'
                },
                store:ajaxStore,
                axes:[
                    {
                        type:'Numeric',
                        position:'bottom',
                        fields:['data1'],
                        label:{
                            renderer:Ext.util.Format.numberRenderer('0,0')
                        },
                        title:'Sample Values',
                        grid:true,
                        minimum:0
                    },
                    {
                        type:'Category',
                        position:'left',
                        fields:['name'],
                        title:'Sample Metrics'
                    }
                ],
                series:[
                    {
                        type:'bar',
                        axis:'bottom',
                        highlight:true,
                        tips:{
                            trackMouse:true,
                            width:140,
                            height:28,
                            renderer:function (storeItem, item) {
                                this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
                            }
                        },
                        label:{
                            display:'insideEnd',
                            field:'data1',
                            renderer:Ext.util.Format.numberRenderer('0'),
                            orientation:'horizontal',
                            color:'#333',
                            'text-anchor':'middle'
                        },
                        xField:'name',
                        yField:['data1']
                    }
                ]
            });
    
    
            var cardWindow = Ext.create('Ext.window.Window', {
                layout:'card',
                activeItem:0,
                width:550,
                height:400,
                tbar:[
                    {
                        text:'Card 0',
                        handler:function () {
                            var w = this.up('window');
                            w.layout.setActiveItem(0);
                        }
                    },
                    {
                        text:'Card 1',
                        handler:function () {
                            var w = this.up('window');
                            w.layout.setActiveItem(1);
                        }
                    }
                ],
                items:[grid, bar]
            });
    
    
            cardWindow.show();
        }
    });



    HELPFUL INFORMATION
    Operating System:
    • Windows 7 64 english enterprise edition

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    Can I get a response from values.php?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Montreal, Canada
    Posts
    255
    Vote Rating
    7
      0  

    Default

    Sure.

    Code:
    [{"name":"metric one","data1":10,"data2":12,"data3":14,"data4":8,"data5":13},{"name":"metric two","data1":7,"data2":8,"data3":16,"data4":10,"data5":3},{"name":"metric three","data1":5,"data2":2,"data3":14,"data4":12,"data5":7},{"name":"metric four","data1":2,"data2":14,"data3":6,"data4":1,"data5":23},{"name":"metric five","data1":27,"data2":38,"data3":36,"data4":13,"data5":33}]
    The chart will load without error if I set the activeItem = 1

  4. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    Checked with 4.1.0 and I don't get the errors that I did with 4.0.7 and the chart looks proper.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •