Six charts in a panel

[ratheeshrohini]

Hi,
I want to display 6 charts in a panel(for i pad).Now I can display graphs horizontally or vertically using hbox or vbox.But I want to display four graph at a time(in 2x2 order).If more than 4 graph user should swipe for next ones....My two chart displaying code is shown below...can anyone tell me the step by step procedure to show four graph at a time?what are the changes that i should make in my following code?(please look at the code marked as red)

Any help will be appreciated highly as a beginner?





Ext.setup({
tabletStartupScreen: 'tablet_startup.jpg',
phoneStartupScreen: 'phone_startup.jpg',
tabletIcon: 'icon-ipad.png',
phoneIcon: 'icon-iphone.png',
glossOnIcon: false,
onReady: function () {
alert("start");


Ext.regModel("Panels", {
fields: ['tle', 'ple', 's_type'],


hasMany: {
model: 'Order',
name: 'orders'
},


proxy: {
type: 'rest',
url: 'resources/dailyreport1.json',
reader: {
type: 'json',
root: 'panels'
}
}
});


Ext.regModel("Order", {
fields: ['title', 'panel_title', 'sub_el_type'],
belongsTo: ['Panels',
{
model: 'Xaxis',
associationKey: 'x_axis'
}],
belongsTo: ['Panels',
{
model: 'Yaxis',
associationKey: 'y_axis'
}],
hasMany: [{
model: 'Plot',
name: 'plot'
}, {
model: 'Slice',
name: 'slice'
}]


});


Ext.regModel("Xaxis", {
fields: ['label', 'values'],


hasMany: 'Order'
});




Ext.regModel("Yaxis", {
fields: ['label', 'values'],


hasMany: 'Order'
});


Ext.regModel("Plot", {
fields: ['label', 'values'],


belongsTo: 'Order'
});


Ext.regModel("Slice", {
fields: ['label', 'value'],


belongsTo: 'Order'
});


var store = new Ext.data.Store({
autoLoad: true,
model: "Panels"
});


var data = [],
p = (Math.random() * 11) + 1,
i;


window.store1;
var plt = new Array();
var axis_x = new Array();
var axis_y = new Array();
var dataArray = new Array();
var dataname = new Array();
var count1 = 0;
store.load({
callback: function () {
var user = store.first();


//alert(user.get('tle'));




user.orders().each(function (order) {
// alert("pro details started..................................");
var type = order.get('sub_el_type');
// alert(order.get('title'));
if (type == "cumulative_line_graph") {
//alert("pro details");
var count = 0;
//alert(order.getYaxis().get('label'));
order.plot().each(function (plot) {
plt[count] = plot.get('values');
count = count + 1;
//
// alert(plot.get('label'));
//alert(plot.get('values'));
});
} else {
order.slice().each(function (slice) {
dataArray[count1] = slice.get('label');
dataname[count1] = slice.get('value');
count1 = count1 + 1;
// alert(slice.get('label'));
// alert(slice.get('value'));
});
}




// alert("pro details completes...............................");
});
window.store1 = new Ext.data.JsonStore({
fields: ['name', 'iphone', 'android', 'ipad'],
data: generateData(5, 20)
});


window.store2 = new Ext.data.JsonStore({
fields: ['name', '2007'],
data: generateData1(5, 20)
});




showgraph();


}
});
window.generateData = function (n, floor) {
//alert("inside........generate.......data")
var j = 0;




var x = 0;
floor = 10;
var cm = 0;
var cm1 = 0;
var cm2 = 0;
for (i = 0; i < plt[1].length; i++) {
k = 0;


cm = cm + plt[0][i][k + 1];
cm1 = cm1 + plt[1][i][k + 1];
cm2 = cm2 + plt[2][i][k + 1];
// alert(plt[2][i][k]+" , "+cm2);
x = x + 50;
data.push({
//name: Date.monthNames[i % 12],
//name: Math.floor(Math.max((Math.random() * 100), floor)),
name: plt[0][i][k],
graph1: cm,
graph2: plt[1][i][k],
graph3: cm1,
graph4: plt[2][i][k],
graph5: cm2
});
}
/* for (i = 0; i < plt[1].length; i++) {
k=0;

x=x+50;
data.push({
//name: Date.monthNames[i % 12],
//name: Math.floor(Math.max((Math.random() * 100), floor)),
graph2: plt[0][i][k],
graph3: cm1

});
}*/
return data;


};












window.generateData1 = function (n, floor) {
var data1 = [],
p = (Math.random() * 11) + 1,
i;


floor = (!floor && floor !== 0) ? 20 : floor;


//var dataArray=['Untagged','SEU','Mobile','Google SEM','Phone'];
// var dataname=['55','20','5','10','10',];
//alert(dataArray);
for (i = 0; i < dataArray.length; i++) {
data1.push({
name: dataArray[i],
2007: dataname[i]
});
}




return data1;
};


















var onRefreshTap = function () {
window.store1.loadData(generateData(5, 20));
};
var onHelpTap = function () {
new Ext.Panel({
floating: true,
modal: true,
centered: true,
width: 300,
height: 250,
styleHtmlContent: true,
scroll: 'vertical',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Line Chart'
}],
stopMaskTapEvent: false,
fullscreen: false,
html: "Tapping a data point will bring up detailed information about it"
}).show('pop');
};
window.showgraph = function () {


var PiePanel = new Ext.chart.Panel({
// renderTo: Ext.getBody(),
...............................................................
...............................................................
});






//alert("haiiiiiiiiiiiiiiiiiii");
var LineChartPanel = new Ext.chart.Panel({
// renderTo: Ext.getBody(),
.........................................................
........................................................

});






var Panel = new Ext.Panel({
renderTo: Ext.getBody(),
layout: 'hbox',
width: 750,
x: 0,
y:0,
dockedItems: {
dock: 'top',
xtype: 'toolbar',
title: 'Daily Sales DashBoard',
ui: 'dark',


items: []
},
items: [LineChartPanel, PiePanel]
});

}


}




});

[mitchellsimoens]

What you should do is use a Carousel and build the items array. You will need to use a mix of vbox and hbox to get the 2x2 grid, vbox for the 2 rows and each row will need to use hbox for the two columns. Each item of the carousel is the 2x2 grid component.

[ratheeshrohini]

Can u show me an example code

[mitchellsimoens]

Can u show me an example code

Have you tried figuring it out?