PDA

View Full Version : Chart bug on tab panel, rendered in other than selected tab..



zaunaf
30 May 2014, 9:44 AM
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:


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


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:


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.

mitchellsimoens
30 May 2014, 9:56 AM
This is a known issue and should be fixed for the next release.

zaunaf
31 May 2014, 1:11 AM
Thanks Mitchell, looking forward for the next release..

srkadiyala
28 Jan 2015, 1:07 PM
I am now facing the same issue and appreciate if the bug is fixed and released.

thanks

niketdude
13 Jul 2016, 6:54 AM
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.

niketdude
13 Jul 2016, 6:55 AM
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.

francescoList
17 Jan 2017, 7:29 AM
Hi, we are experiencing the same issue in Extjs 6.2.1 ..is there a workaround please?