[UNKNOWN][3.??] Cross browser problem with Chart/FF - works in IE, Chrome

[MrRoyce]

Hi there, I ran into a cross broswer issue today where my linechart did not display in FF 3.5, but showed fine in IE 8 and Chrome 2.0 - I tracked the difference down to the height not being specified for a container. In my 'createDataContaner' function, if I don't specify the height, then the chart displays correctly in IE and Chrome, but I have to have the height in order for the chart to display in FF.

Here is sample code:

// Factories  

function createSummaryLayout(config) {
    return new Ext.Panel(Ext.apply({
        baseCls:'x-plain',
        layout:'table',
        layoutConfig: {columns:1},
        // applied to child components
        defaults: {frame:true, width:860, height: 220}
    }, config));
};


function createDataContaner(config) {
    return new Ext.Container(Ext.apply({
        width: 860
        //,height: 220
    }, config));
};


Ext.onReady(function(){    

        var store = new Ext.data.JsonStore({
        fields:['name', 'visits', 'views'],
        data: [
            {name:'Jul 07', visits: 245000, views: 3000000},
            {name:'Aug 07', visits: 240000, views: 3500000},
            {name:'Sep 07', visits: 355000, views: 4000000},
            {name:'Oct 07', visits: 375000, views: 4200000},
            {name:'Nov 07', visits: 490000, views: 4500000},
            {name:'Dec 07', visits: 495000, views: 5800000},
            {name:'Jan 08', visits: 520000, views: 6000000},
            {name:'Feb 08', visits: 620000, views: 7500000}
        ]
    });


            
            var roi_container = createDataContaner({
                
                items: {
                    xtype: 'linechart',
                    store: store,
                    xField: 'name',
                    yField: 'visits',
                    yAxis: new Ext.chart.NumericAxis({
                        displayName: 'Visits',
                        labelRenderer : Ext.util.Format.numberRenderer('0,0')
                    })

                }
            });         
            
            var ecommerce_summary_panel = createSummaryLayout({ 
                region: 'center',
                autoHeight: true,
                
                items:[{
                        title:'ROI',
                        items:[
                            roi_container
                        ]
                    }]
            });            
        
            var ecomm_win = new Ext.Window({
                title: 'Analytical Data',
                id : 'ecomm_win',
                width: 890,
                height: 600,
                layout: 'border',
                items: [ecommerce_summary_panel]
                });

            ecomm_win.show(this);
        });

[evant]

Not a bug, moving to help.

[Jack9]

This code looks fine to me. In testing, there's no problem in FireFox3.5.2 but there is in IE6 where no height = 0 height. Also I converted the JsonStore to a SimpleStore since there's no point in calling it a JsonStore.

I do think there's a little too much nesting.

var roi_container = createDataContaner({
items: {
xtype: 'linechart',
store: store,
xField: 'name',
yField: 'visits',
yAxis: new Ext.chart.NumericAxis({
displayName: 'Visits',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
})
}
});

This is a variable that's storing a reference to a panel with 1 item (a linechart) in it, returned from a function. Why is there an implicit panel at all? You can apply your height/width to a linechart component IIRC. Why not set the height/width in a variable set at the beginning? I dunno.

[MrRoyce]

Hi there, thanks for your reply. The code I posted was a quickly stripped down sample from a much larger program. Its odd that you didn't get the same result with FF 3.5.2. I tested it witth 2 seperate machines and both had the same result. I am jsut learning this stuff so thanks for your suggestions.