PDA

View Full Version : Charts not displaying inside panel.



meyde
4 Oct 2011, 11:21 AM
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
7 Nov 2011, 6:19 AM
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
15 Nov 2011, 10:30 AM
I make it!

Thanks, Cangot!

hundare
20 Jun 2012, 6:47 AM
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!