PDA

View Full Version : How to apply Multiple colors for Bar chart columns



nawinm916
28 Jul 2016, 7:07 AM
Hi all,


Here i am having a chart which is a combination of Column and line.
Here incoming and outgoing are represented as column and profit is represented as line.
Incoming is combination of amount1,amount2,amount3.
Outgoing is combination of amount4,amount5,amount6,amount7.
In the below example all the above criteria is achieved.
But now i want show each bar should be divided with the internal amounts and they should be shown with different color.
Any help?


I am using Ext version 4.2.1.


Here is code for chart



var store = Ext.define('tz.store.VendorProfitsStore', {
extend : 'Ext.data.Store',
model: 'tz.model.VendorProfits',
fields : [ {name: 'id', type: 'int'},
{name: 'amount1' , type:'float'},
{name: 'amount2' , type:'float'},
{name: 'amount3' , type:'float'},
{name: 'amount4' , type:'float'},
{name: 'amount5' , type:'float'},
{name: 'amount6' , type:'float'},
{name: 'amount7' , type:'float'},
{name: 'profit' , type:'float'},
{name: 'incoming' , type:'float'},
{name: 'outgoing' , type:'float'},
{name: 'created', type: 'date', dateFormat: 'Y-m-d H:i:s.u'} ,
]
sorters: [{property: 'created',direction: 'DESC'}],
});


var chart = Ext.create('Ext.chart.Chart', {
width: 1000,
height: 550,
legend: {
position: 'right',
},
style: 'background:#fff',
animate: true,
theme: 'Category1',
store: store,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['incoming','outgoing','profit'],
title: 'Amount',
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true
}, {
type: 'Category',
position: 'bottom',
fields: ['created'],
title: 'Date',
label: {
renderer: function(value) {
return Ext.Date.format(value,'m/d/y');
}
},
}],
series: [{
type: 'column',
axis: 'left',
xField: 'created',
yField: ['incoming','outgoing'],
title: ['( A1+A2+A3 )','(B + C + D + E)'],
//stacked: true,
highlight: true,
markerConfig: {
type: 'cross',
size: 3
},
tips: {
trackMouse: true,
width: 500,
height: 28,
renderer: function(storeItem, item) {
if (item.yField == "incoming") {
this.update(Ext.util.Format.usMoney(storeItem.get('amount1')) + ' + '
+ Ext.util.Format.usMoney(storeItem.get('amount2')) + ' + '
+ Ext.util.Format.usMoney(storeItem.get('amount3')) + ' = '
+ Ext.util.Format.usMoney(storeItem.get('incoming'))
);
}else {
this.update(Ext.util.Format.usMoney(storeItem.get('amount4')) + ' + '
+ Ext.util.Format.usMoney(storeItem.get('amount5')) + ' + '
+ Ext.util.Format.usMoney(storeItem.get('amount6')) + ' + '
+ Ext.util.Format.usMoney(storeItem.get('amount7')) + ' = '
+ Ext.util.Format.usMoney(storeItem.get('outgoing'))
);
}
}
},
},{
type: 'line',
axis: 'left',
smooth: true,
highlight: true,
//fill: true,
//fillOpacity: 0.5,
xField: 'created',
yField: 'profit',
title:'Profit : ( A1+A2+A3 ) - (B + C + D + E)',
tips: {
trackMouse: true,
width: 100,
anchor:'100%',
height: 28,
renderer: function(storeItem, item) {
this.setTitle(Ext.util.Format.usMoney(parseInt(storeItem.get('profit'))));
}
},

}]
});


And requirement is as followed

54856


Thanks in advance

Gary Schlosberg
2 Aug 2016, 8:41 AM
Here's a thread that might help:
https://www.sencha.com/forum/showthread.php?160333

nawinm916
3 Aug 2016, 12:56 AM
Thanks Gary Schlosberg ,In the given thread, multiple colors applied for multiple bars. Now i required multiple colors in each bar.

Gary Schlosberg
4 Aug 2016, 2:41 PM
Ah, sorry -- I should have looked more closely at the image you posted. Have you looked into a stacked column chart? Here's a bar example:
http://docs.sencha.com/extjs/4.2.5/#!/example/charts/StackedBar.html

Here's a related thread with a Fiddle:
https://www.sencha.com/forum/showthread.php?301546