How to add charts in a panel with tabular layout

[abhijit.chanda]

Hi ,

I was trying to add some charts in a panel. I have successfully made the layout, was trying to add the items in the charts. But some how i am unable to do so. My code snippet

1. My Main Panel code

Ext.onReady(function(){
Ext.create('Ext.panel.Panel', {

title: 'Report',
renderTo: Ext.getBody(),
frame: false,
border: false,
bodyPadding: 5,
bodyStyle: 'background:transparent;',

fieldDefaults: {
labelAlign: 'left',
msgTarget: 'side'
},

requires:[
'RadarChart'
],

layout: {
type: 'table',
columns: 10
},

items: [{

width: Ext.getBody().getViewSize().width*0.5,
height: Ext.getBody().getViewSize().height*0.3,
html: 'Efficiency Trends',
xtype: 'RadarChart',
colspan : 5
}, {
width: Ext.getBody().getViewSize().width*0.3,
height: Ext.getBody().getViewSize().height*0.3,
html: 'Pie Chart',
colspan: 3
}, {
width: Ext.getBody().getViewSize().width,
height: Ext.getBody().getViewSize().height*0.4,
html: 'Mixed Chart',
colspan : 10
}
]
});
});


2. My RadarChart class is as follows

Ext.define('RadarChart', {
extend: 'Ext.chart.Chart',
alias : 'widget.RadarChart',

style: 'background:#fff',
theme: 'Category2',
insetPadding: 20,
animate: true,
store: store1,
legend: {
position: 'right'
},
axes: [{
type: 'Radial',
position: 'radial',
label: {
display: true
}
}],
series: [{
showInLegend: true,
type: 'radar',
xField: 'name',
yField: 'field1',
style: {
opacity: 0.4
}
},{
showInLegend: true,
type: 'radar',
xField: 'name',
yField: 'field2',
style: {
opacity: 0.4
}
},{
showInLegend: true,
type: 'radar',
xField: 'name',
yField: 'field3',
style: {
opacity: 0.4
}
}]
});


Please suggest me where i am getting the thing wrong

[mitchellsimoens]

Should you be giving the items a size with height/width?

[abhijit.chanda]

Thanks for the reply. Ayways I have solved the issue. It was an issue of data not properly initiated.