Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    2
    Vote Rating
    0
    meyde is on a distinguished road

      0  

    Default Unanswered: Charts not displaying inside panel.

    Unanswered: Charts not displaying inside panel.


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

    what's wrong my source??

    src
    Code:
    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]
            });
        }
    });

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Posts
    12
    Vote Rating
    0
    Cangot is on a distinguished road

      0  

    Default


    You can't use the fit layout.
    -> " If the container hasmultiple panels, only the first one will be displayed."
    You can try :
    Code:
     layout: { type: 'vbox', align: 'stretch' }

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    2
    Vote Rating
    0
    meyde is on a distinguished road

      0  

    Default


    I make it!

    Thanks, Cangot!

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    26
    Vote Rating
    1
    hundare is on a distinguished road

      0  

    Default


    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!

Thread Participants: 2

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar