PDA

View Full Version : Arrange Graph Horizondally



ratheeshrohini
10 Feb 2012, 3:03 AM
Hi,
I created a pie chart and line graph.Now I want to to arrange it horizondally. .Any help will be appreciated highly as a beginner

Naga
10 Feb 2012, 3:16 AM
you create the Pie and line charts in separate panels and take one Parent panel, for that set layout : 'hbox', and add two panels to the parent panel.

Regards,
Nag.

ratheeshrohini
10 Feb 2012, 3:53 AM
Hi Nag ,
Thanks for ur instant reply.My index.js file consist following code:

The code marked in two color are two panels...What are the changes that i should do for making it in horizondal?

please help........

Ext.setup({
tabletStartupScreen: 'tablet_startup.jpg',
phoneStartupScreen: 'phone_startup.jpg',
tabletIcon: 'icon-ipad.png',
phoneIcon: 'icon-iphone.png',
glossOnIcon: false,
onReady: function() {
window.generateData = function(n, floor) {
var data = [],
p = (Math.random() * 11) + 1,
i;


floor = 10;


for (i = 0; i < (n || 12); i++) {
data.push({
name: Date.monthNames[i % 12],
iphone: Math.floor(Math.max((Math.random() * 100), floor)),
android: Math.floor(Math.max((Math.random() * 100), floor)),
ipad: Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};
window.store1 = new Ext.data.JsonStore({
fields: ['name', 'iphone', 'android', 'ipad'],
data: generateData(5, 20)
});
Ext.create('Ext.panel.Panel', {
title: 'Column Layout - Percentage Only',
width: 350,
height: 250,
layout:'column',
items: [{
title: 'Column 1',
columnWidth: .25
},{
title: 'Column 2',
columnWidth: .55
},{
title: 'Column 3',
columnWidth: .20
}],
renderTo: Ext.getBody()
});
var onRefreshTap = function() {
window.store1.loadData(generateData(5, 20));
};
var onHelpTap = function() {
new Ext.Panel({
floating: true,
modal: true,
centered: true,

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');
};


new Ext.chart.Panel({
renderTo: Ext.getBody(),
title: 'Line Charhhhhhhh1234',

height: 300,
width: 300,

items: {
cls: 'line1',
theme: 'Demo',
store: store1,
animate: true,
shadow: true,


legend: {
position: 'right'
},
interactions: [{
type: 'panzoom',
axes: {
left: {}
}
}, {
type: 'iteminfo',
listeners: {
show: function(interaction, item, panel) {
var storeItem = item.storeItem;
panel.update(['<ul><li><b>Month: </b>' + storeItem.get('name') + '</li>', '<li><b>Value: </b> ' + item.value[1]+ '</li></ul>'].join(''));
}
}
}],
axes: [{
type: 'Numeric',
minimum: 0,
maximum: 50,
position: 'left',
fields: ['iphone', 'android', 'ipad'],
title: 'Number of Hits',
minorTickSteps: 1
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year'
}],
series: [ {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'name',
yField: 'ipad',
title: 'iPad'
}]
}
});


new Ext.chart.Panel({
title: 'Pie Chart',
fullscreen: true,
dockedItems: [{
xtype: 'button',
iconCls: 'help',
iconMask: true,
ui: 'plain',
handler: onHelpTap
}, {
xtype: 'button',
iconCls: 'shuffle',
iconMask: true,
ui: 'plain',
handler: onRefreshTap
}],
items: {
cls: 'pie1',
theme: 'Demo',
store: store1,
shadow: false,
animate: true,
insetPadding: 20,
legend: {
position: {
portrait: 'bottom',
landscape: 'left'
}
},
interactions: [{
type: 'reset',
confirm: true
},
{
type: 'rotate'
},
{
type: 'iteminfo',
gesture: 'taphold',
listeners: {
show: function(interaction, item, panel) {
var storeItem = item.storeItem;
panel.update(['<ul><li><b>Month: </b>' + storeItem.get('name') + '</li>', '<li><b>Value: </b> ' + storeItem.get('2007') + '</li></ul>'].join(''));
}
}
},
{
type: 'piegrouping',
//snapWhileDragging: true,
onSelectionChange: function(me, items) {
if (items.length) {
var sum = 0,
i = items.length;
while(i--) {
sum += items[i].storeItem.get('2007');
}
chartPanel.descriptionPanel.setTitle('Total: ' + sum);
chartPanel.headerPanel.setActiveItem(1, {
type: 'slide',
direction: 'left'
});
}
else {
chartPanel.headerPanel.setActiveItem(0, {
type: 'slide',
direction: 'right'
});
}
}
}],
series: [{
type: 'pie',
field: '2007',
showInLegend: true,
highlight: false,
listeners: {
'labelOverflow': function(label, item) {
item.useCallout = true;
}
},
// Example to return as soon as styling arrives for callouts
callouts: {
renderer: function(callout, storeItem) {
callout.label.setAttributes({
text: storeItem.get('name')
}, true);
},
filter: function() {
return false;
},
box: {
//no config here.
},
lines: {
'stroke-width': 2,
offsetFromViz: 20
},
label: {
font: 'italic 14px Arial'
},
styles: {
font: '14px Arial'
}
},
label: {
field: 'name'
}
}]
}
});
}


});

Naga
12 Feb 2012, 11:30 PM
hi ,

for example you can specify like this

First create one parent panel like


var Panel = new Ext.Panel({
layout: 'hbox',
dockedItems: {
dock: 'top',
xtype: 'toolbar',
title: 'Line & Pie chart',
items: [ ]
},
items: [ LineChartPanel,PiePanel,]
});


and now create separate panels for line and pie charts


var LineChartPanel= new Ext.chart.Chart({
// your required stuff for the line chart
});

var PiePanel= new Ext.chart.Chart({

// your required stuff for the Pie chart
});

Regards,
Nag.