Two charts in the same panel overlap each other. Why? - sencha-touch

Question

I am trying to put 2 charts next to each other, just like the Yearly view in the example EnergyApp. My code I use for initiating the charts and putting them into the Panel is as follows:
var salesChart = new Ext.Panel({
title: 'Sales',
iconCls: 'line',
cls: 'chartpanel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
flex: 1,
xtype: 'chart',
cls: 'sales',
store: StoreDemo.stores.SalesStore,
shadow: true,
animate: true,
interactions: [{
type: 'iteminfo',
listeners: {
show: function(interaction, item, panel) {
// Can be used to pop-up more information or to load drill down chart
}
}
}, {
type: 'panzoom',
axes: ['bottom']
}],
axes: [{
type: 'Numeric',
position: 'left',
minimum: 0,
maximum: 1000,
fields: ['total'],
label: {
renderer: function(v) {
return v.toFixed(0);
}
},
title: 'Total'
},
{
type: 'Category',
position: 'bottom',
fields: ['month'],
label: {
renderer: function(v) {
return Date.monthNames[(v - 1) % 12];
}
},
title: 'Month of the Year'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
label: {
field: 'total'
},
xField: 'month',
yField: 'total'
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
fill: true,
axis: 'left',
smooth: true,
label: {
field: 'forecast'
},
xField: 'month',
yField: 'forecast'
}]
}, {
flex: 1,
xtype: 'chart',
cls: 'sales-forecast',
store: StoreDemo.stores.SalesForecastStore,
shadow: true,
animate: true,
interactions: [{
type: 'iteminfo',
listeners: {
show: function(interaction, item, panel) {
// Can be used to pop-up more information or to load drill down chart
}
}
}, {
type: 'panzoom',
axes: ['bottom']
}],
axes: [{
type: 'Numeric',
position: 'left',
minimum: 0,
maximum: 1000,
fields: ['total'],
label: {
renderer: function(v) {
return v.toFixed(0);
}
},
title: 'Total (Forecast)'
},
{
type: 'Category',
position: 'bottom',
fields: ['month'],
label: {
renderer: function(v) {
return Date.monthNames[(v - 1) % 12];
}
},
title: 'Month of the Year'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
label: {
field: 'total'
},
xField: 'month',
yField: 'total'
}]
}]
});
StoreDemo.views.ChartView = new Ext.TabPanel({
tabBar: {
dock: 'top',
layout: {
pack: 'center'
}
},
ui: 'light',
cardSwitchAnimation: {
type: 'slide'
},
items: [salesChart]
});
The two charts overlap, but only the data, not the axes. Here is a screenshot from Chrome 14 (it also happens on Chrome 16 and Safari 5):
You can see that the right chart is empty since the data is displayed behind the left chart.
The same thing happens for 3 charts. I tried to set a fixed width and height instead of a flex number, but then the charts completely disappeared.
I searched Google and this forum and didn't find any topic to help me (I also read the articles in the Sencha Learn, and of course the source of the EnergyApp).
Your help is very appreciated.
Ofir

Answer 1

You can try to set the layout of items that under the panel as 'fit'.