Results 1 to 7 of 7

Thread: Chart bug on tab panel, rendered in other than selected tab..

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jul 2007
    Posts
    19

    Default Chart bug on tab panel, rendered in other than selected tab..

    Hello all,

    When I create a chart in a tab panel, it works fine as long as it's positioned in "selected" tab on render. But if I place it in hidden / other than selected tab, it throws error, and the panel draws blank.

    I tried to create a test case in Sencha Fiddle but I failed. I didn't know how to include sencha-chart package to a sencha fiddle project. I'm using code from examples, and an app generated by sencha command. So here is my code (I put it all in app/view folder):

    Chart.js:
    Code:
    Ext.define('MyApp.view.main.Chart', {
        extend: 'Ext.Panel',
        requires: 'Ext.chart.Chart',
        xtype: 'myapp-chart',
        layout: 'fit',
        initComponent: function() {
            
            var me = this;
    
            this.myDataStore = Ext.create('Ext.data.JsonStore', {
                fields: ['month', 'data1', 'data2', 'data3', 'data4',
                    { name: 'other', convert: function(value, record) {
                        var total = 0;
                        Ext.Object.each(record.data, function(key, value) {
                            total += Ext.isNumber(value) ? value : 0;
                        });
                        return Math.max(0, 100 - total);
                    } }
                ],
                data: [
                    { month: 'Jan', data1: 20, data2: 37, data3: 35, data4: 4 },
                    { month: 'Feb', data1: 20, data2: 37, data3: 36, data4: 5 },
                    { month: 'Mar', data1: 19, data2: 36, data3: 37, data4: 4 },
                    { month: 'Apr', data1: 18, data2: 36, data3: 38, data4: 5 },
                    { month: 'May', data1: 18, data2: 35, data3: 39, data4: 4 },
                    { month: 'Jun', data1: 17, data2: 34, data3: 42, data4: 4 },
                    { month: 'Jul', data1: 16, data2: 34, data3: 43, data4: 4 },
                    { month: 'Aug', data1: 16, data2: 33, data3: 44, data4: 4 },
                    { month: 'Sep', data1: 16, data2: 32, data3: 44, data4: 4 },
                    { month: 'Oct', data1: 16, data2: 32, data3: 45, data4: 4 },
                    { month: 'Nov', data1: 15, data2: 31, data3: 46, data4: 4 },
                    { month: 'Dec', data1: 15, data2: 31, data3: 47, data4: 4 }
                ]
            });
            
            me.items = [{
                xtype: 'cartesian',
                width: '100%',
                height: 410,
                style: 'background: #fff;',
                legend: {
                    docked: 'bottom'
                },
                store: this.myDataStore,
                insetPadding: {
                    top: 40,
                    left: 40,
                    right: 40,
                    bottom: 20
                },
                items: [{
                    type: 'text',
                    text: 'Column Charts - 100% Stacked Columns',
                    font: '22px Helvetica',
                    width: 100,
                    height: 30,
                    x: 40, // the sprite x position
                    y: 20  // the sprite y position
                }, {
                    type: 'text',
                    text: 'Data: Browser Stats 2012',
                    font: '10px Helvetica',
                    x: 12,
                    y: 380
                }, {
                    type: 'text',
                    text: 'Source: http://www.w3schools.com/',
                    font: '10px Helvetica',
                    x: 12,
                    y: 390
                }],
                axes: [{
                    type: 'numeric',
                    position: 'left',
                    grid: true,
                    fields: ['data1', 'data2', 'data3', 'data4', 'other' ],
                    renderer: function(v) { return v + '%'; },
                    minimum: 0,
                    maximum: 100
                }, {
                    type: 'category',
                    position: 'bottom',
                    grid: true,
                    fields: ['month'],
                    label: {
                        rotate: {
                            degrees: -45
                        }
                    }
                }],
                series: [{
                    type: 'bar',
                    axis: 'left',
                    title: [ 'IE', 'Firefox', 'Chrome', 'Safari', 'Others' ],
                    xField: 'month',
                    yField: [ 'data1', 'data2', 'data3', 'data4', 'other' ],
                    stacked: true,
                    style: {
                        opacity: 0.80
                    },
                    highlightCfg: {
                        fillStyle: '#000',
                        lineWidth: 1,
                        strokeStyle: '#fff'
                    },
                    tips: {
                        trackMouse: true,
                        style: 'background: #FFF',
                        height: 20,
                        renderer: function(storeItem, item) {
                            var browser = item.series.title[item.series.yField.indexOf(item.yField)];
                            this.setTitle(browser + ' for ' + storeItem.get('month') + ': ' + storeItem.get(item.yField) + '%');
                        }
                    }
                }]
            }];
            
            this.callParent();
    
        }
    });
    Main.js
    Code:
    Ext.define('MyApp.view.main.Main', {
        extend: 'Ext.container.Container',
        requires: [
            'MyApp.view.main.Chart'
        ],
        xtype: 'app-main',
        
        controller: 'main',
        viewModel: {
            type: 'main'
        },
    
        layout: {
            type: 'border'
        },
    
        items: [{
            xtype: 'panel',
            bind: {
                title: '{name}'
            },
            region: 'west',
            html: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',
            width: 250,
            split: true,
            tbar: [{
                text: 'Button',
                handler: 'onClickButton'
            }]
        },{
            xtype: 'tabpanel',
            region: 'center',
            items:[{
                title: 'Tab 1',
                html: '<h2>Content appropriate for the current navigation.</h2>'
    
            },{
                title: 'Tab 2',
                xtype: 'myapp-chart'
    
    
            }]
        }]
    });
    The error is:
    Code:
    TypeError: me.innerElement is undefined
    size = me.innerElement.getSize(),
    http://myapp/ext/packages/sencha-charts/src/chart/AbstractChart.js?_dc=1401452211570 (line 1119)
    I believe this is a bug. Thanks before.

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448

    Default

    This is a known issue and should be fixed for the next release.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Jul 2007
    Posts
    19

    Default

    Thanks Mitchell, looking forward for the next release..

  4. #4

    Default Facing same issue - is the big fixed and releases?

    I am now facing the same issue and appreciate if the bug is fixed and released.

    thanks

  5. #5

    Default Kindly provide the work-around for this bug

    Hi,

    As I am using 6.1.2.15,still facing the same issue.

    Please help me to resolve it or help me with the workaround.

  6. #6

    Default Please help me with the some workaround

    Kindly provide the work-around for this bug

    Hi,

    As I am using 6.1.2.15,still facing the same issue.

    Please help me to resolve it or help me with the workaround.

  7. #7
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    18

    Default

    Hi, we are experiencing the same issue in Extjs 6.2.1 ..is there a workaround please?

Tags for this Thread

Posting Permissions

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