Charts not displaying inside panel.

[meyde]

I'm trying to display some charts in one panel.but can't.
I use layout 'fit'.

what's wrong my source??

src

Ext.setup({
    glossOnIcon: true,
    onReady:function(){
        window.generateData_BB = function(n, floor) {
            var data = [],
                p = (Math.random() * 11) + 1,
                i;
            floor = (!floor && floor !== 0) ? 50 : floor;
            for (i = 0; i < (n || 31); i++) {
                data.push({
                    name: '2010/'+('0'+(i+1)).slice(-2),
                    Sales: Math.floor(Math.max((Math.random() * 100), floor)),
                    Booking: Math.floor(Math.max((Math.random() * 100), floor)),
                    BB_Ratio: Math.floor(Math.max((Math.random() * 100), floor)),
                    Budget: Math.floor(Math.max((Math.random() * 100), floor))
                });
            }
            return data;
        };

        window.store_BB    =    new    Ext.data.JsonStore({
                        fields:    ['name',    'Sales',    'Booking',    'BB_Ratio',    'Budget'],
                        data:    generateData_BB(12,    20)
        });

        window.generateData_BP = function(n, floor) {
            var data = [],
                p = (Math.random() * 11) + 1,
                i;

            floor = (!floor && floor !== 0) ? 50 : floor;

            for (i = 0; i < (n || 31); i++) {
                data.push({
                    name: i,
                    201107: Math.floor(Math.max((Math.random() * 100), floor)),
                    201108: Math.floor(Math.max((Math.random() * 100), floor)),
                    201109: Math.floor(Math.max((Math.random() * 100), floor)),
                    201110: Math.floor(Math.max((Math.random() * 100), floor)),
                    budget: Math.floor(Math.max((Math.random() * 100), floor)),
                    data6: Math.floor(Math.max((Math.random() * 100), floor)),
                    data7: Math.floor(Math.max((Math.random() * 100), floor)),
                    data8: Math.floor(Math.max((Math.random() * 100), floor)),
                    data9: Math.floor(Math.max((Math.random() * 100), floor))
                });
            }
            return data;
        };

        window.store_BP    =    new    Ext.data.JsonStore({
                        fields:    ['name',    '201107',    '201108',    '201109',    '201110',    'budget',    'data6',    'data7',    'data9',    'data9'],
                        data:    generateData_BP(31,    20)
        });
        window.store_BP.loadData(generateData_BP(31, 20));
        window.store_BB.loadData(generateData_BB(12, 20));

    var cpanel_BB =    new Ext.chart.Chart({
        id: 'BB',
        height: 250,
        width: 250,
        title: 'BB',
        animate: {
            easing: 'bounceOut',
            duration: 750
        },
        legend: {
        position: 'top'
        },
        store: store_BB,
        shadow: false,
        gradients: [{
            'id': 'v-1',
            'angle': 0,
            stops: {
                0: {
                    color: 'rgb(212, 40, 40)'
                },
                100: {
                    color: 'rgb(117, 14, 14)'
                }
            }
        },
        {
            'id': 'v-2',
            'angle': 0,
            stops: {
                0: {
                    color: 'rgb(45, 117, 226)'
                },
                100: {
                    color: 'rgb(14, 56, 117)'
                }
            }
        }],
        axes: [{
            type: 'Numeric',
            position: 'left',
            fields: ['Sales', 'Booking'],
            minimum: 0,
            maximum: 100,
            title: 'Mill'
        },{
            type: 'Numeric',
            position: 'right',
            fields: ['BB_Ratio', 'data5'],
            minimum: 0,
            maximum: 100,
            title: 'Index'
        },
        {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            label: {
                rotate: {
                    degrees: -45
                }
            }
        }],
        series: [{
            type: 'column',
            axis: 'left',
            highlight: true,
            xField: 'name',
            yField: ['Sales','Booking']
        },{
            type: 'line',
            axis: 'right',
            highlight: true,
            markerCfg: {
                type: 'circle'
            },
            xField: 'name',
            yField: 'BB_Ratio'
        },{
            type: 'line',
            axis: 'right',
            highlight: true,
            markerCfg: {
                type: 'circle'
            },
            xField: 'name',
            yField: 'Budget'
        }]
    });

    var cpanel_BP =    new Ext.chart.Chart({
        height: 250,
        width: 250,
        id: 'BP',
        title: 'BP',
        animate: {
            easing: 'bounceOut',
            duration: 750
        },
        legend: {
            position: 'top'
        },
        store: store_BP,
        shadow: false,
        gradients: [{
            'id': 'v-1',
            'angle': 0,
            stops: {
                0: {
                    color: 'rgb(212, 40, 40)'
                },
                100: {
                    color: 'rgb(117, 14, 14)'
                }
            }
        },
        {
            'id': 'v-2',
            'angle': 0,
            stops: {
                0: {
                    color: 'rgb(45, 117, 226)'
                },
                100: {
                    color: 'rgb(14, 56, 117)'
                }
            }
        }],
        axes: [{
            type: 'Numeric',
            position: 'left',
            fields: ['201107', '201108', '201109', '201110', 'budget'],
            minimum: 0,
            maximum: 100,
            grid: true,
            label: {
                renderer: function(v) {
                    return v.toFixed(0);
                }
            },
        },
        {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            label: {
                rotate: {
                    degrees: -45
                }
            }
        }],
        series: [{
            type: 'line',
            axis: 'left',
            highlight: true,
            renderer: function(sprite, storeItem, barAttr, i, store) {
                barAttr.fill = (i==11) ? colors[0] :colors[1];
                return barAttr;
            },
            label: {
                field: '201107'
            },
            markerCfg: {
                type: 'circle'
            },
            xField: 'name',
            yField: '201107'
        },{
            type: 'line',
            axis: 'left',
            highlight: true,
            renderer: function(sprite, storeItem, barAttr, i, store) {
                barAttr.fill = (i==11) ? colors[0] :colors[1];
                return barAttr;
            },
            label: {
                field: '201108'
            },
            markerCfg: {
                type: 'circle'
            },
            xField: 'name',
            yField: '201108'
        },{
            type: 'line',
            axis: 'left',
            highlight: true,
            renderer: function(sprite, storeItem, barAttr, i, store) {
                barAttr.fill = (i==11) ? colors[0] :colors[1];
                return barAttr;
            },
            label: {
                field: '201109'
            },
            markerCfg: {
                type: 'circle'
            },
            xField: 'name',
            yField: '201109'
        },{
            type: 'line',
            axis: 'left',
            highlight: true,
            renderer: function(sprite, storeItem, barAttr, i, store) {
                barAttr.fill = (i==11) ? colors[0] :colors[1];
                return barAttr;
            },
            label: {
                field: '201110'
            },
            markerCfg: {
                type: 'circle'
            },
            xField: 'name',
            yField: '201110'
        },{
            type: 'line',
            axis: 'left',
            highlight: true,
            renderer: function(sprite, storeItem, barAttr, i, store) {
                barAttr.fill = (i==11) ? colors[0] :colors[1];
                return barAttr;
            },
            label: {
                field: 'budget'
            },
            markerCfg: {
                type: 'circle'
            },
            xField: 'name',
            yField: 'budget'
        }]
    });
        new Ext.chart.Panel({
            fullscreen: true,
            layout: 'fit',
            items: [cpanel_BP,cpanel_BB]
        });
    }
});

[Cangot]

You can't use the fit layout.
-> " If the container hasmultiple panels, only the first one will be displayed."
You can try :

 layout: { type: 'vbox', align: 'stretch' }

[meyde]

I make it!

Thanks, Cangot!

[hundare]

Hi, were you able to load the graph/ reduce the size of the graph and fit it inside a panel? can you please share the solution if you have found any?

Thanks!