Touch charts in carousel

[06011990]

I have tried to implement touch chart in carousel, but i am facing poblem with swiping the carousel,the charts added are all appearing in a single carousel while all the others remain blank.Is there any solution for the above problem

I have attached the code below for the implementation

can anyone help on this..

App.views.ReportsForm = Ext.extend(Ext.Carousel, {
fullscreen: true,


initComponent: function() {
var store1 = new Ext.data.JsonStore({
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [
{'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
{'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
{'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
{'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
{'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
]
});
var charts1= new Ext.chart.Chart({
renderTo: Ext.getBody(),
id: 'chartarea',
width: 500,
height: 300,
store: store1,
axes: [{
type: 'Numeric',
grid: true,
position: 'left',
fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
title: 'Sample Values',
grid: {
odd: {
opacity: 1,
fill: 'pink',
stroke: 'black',
'stroke-width': 3
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics',
grid: true,
label: {
rotate: {
degrees: 315
}
}
}],
series: [{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
style: {
opacity: 10
}
}]
});
var charts2= new Ext.chart.Chart({
renderTo: Ext.getBody(),
id: 'chartarea',
width: 500,
height: 300,
store: store1,
axes: [{
type: 'Numeric',
grid: true,
position: 'left',
fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
title: 'Sample Values',
grid: {
odd: {
opacity: 1,
fill: 'pink',
stroke: 'black',
'stroke-width': 3
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics',
grid: true,
label: {
rotate: {
degrees: 315
}
}
}],
series: [{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
style: {
opacity: 10
}
}]
});
var charts3= new Ext.chart.Chart({
renderTo: Ext.getBody(),
id: 'chartarea',
width: 500,
height: 300,
store: store1,
axes: [{
type: 'Numeric',
grid: true,
position: 'left',
fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
title: 'Sample Values',
grid: {
odd: {
opacity: 1,
fill: 'pink',
stroke: 'black',
'stroke-width': 3
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics',
grid: true,
label: {
rotate: {
degrees: 315
}
}
}],
series: [{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
style: {
opacity: 10
}
}]
});
var panel1 = new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch'
},
align : 'right',
width : '100%',
style : {
padding : '10px 20px 0px 200px'
},
items : [charts1]
});
var panel2 = new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch'
},
align : 'right',
width : '100%',
style : {
padding : '10px 20px 0px 200px'
},
items : [charts2]
});
var panel3 = new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch'
},
align : 'right',
width : '100%',
style : {
padding : '10px 20px 0px 200px'
},
items : [charts3]
});

Ext.apply(this, {
defaults: {
layout: {
type: 'vbox',
align: 'stretch'
}
},
items: [panel1,panel2,panel3]
});
App.views.ReportsForm.superclass.initComponent.call(this);
}
});
Ext.reg('App.views.ReportsForm', App.views.ReportsForm);

Advance thamhs..

[mitchellsimoens]

Don't use renderTo and make sure you need all that nesting of panels.