PDA

View Full Version : How to create a stacked and grouped column chart?



netemp
7 Feb 2012, 1:31 AM
In our application, we need to display column charts in such a way that we need to use the property of both stacked and group. That is, few bars will appear paraller to each other and every bar will also have stacks present in it something similar to this - http://www.highcharts.com/demo/column-stacked-and-grouped


The issue in this is that as soon as stacked:true property is added to the series of charts, the grouping dies.


Has anyone given a try to this and is this currently feasible?


Any help would be greatly appreciated.


Thanks
PS: We are using ExtJS 4.0.7

mitchellsimoens
7 Feb 2012, 6:34 AM
This is using the Stacked Bar chart example that I modified to be a stacked column chart


var store = Ext.create('Ext.data.JsonStore', {
fields: ['year', 'comedy', 'action', 'drama', 'thriller'],
data: [
{year: 2005, comedy: 34000000, action: 23890000, drama: 18450000, thriller: 20060000},
{year: 2006, comedy: 56703000, action: 38900000, drama: 12650000, thriller: 21000000},
{year: 2007, comedy: 42100000, action: 50410000, drama: 25780000, thriller: 23040000},
{year: 2008, comedy: 38910000, action: 56070000, drama: 24810000, thriller: 26940000}
]
});

var panel1 = Ext.create('widget.panel', {
width: 800,
height: 400,
title: 'Stacked Bar Chart - Movies by Genre',
renderTo: Ext.getBody(),
layout: 'fit',
items: {
xtype: 'chart',
animate: true,
shadow: true,
store: store,
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['comedy', 'action', 'drama', 'thriller'],
title: false,
grid: true,
label: {
renderer: function(v) {
return String(v).replace(/(.)00000$/, '.$1M');
}
},
roundToDecimal: false
}, {
type: 'Category',
position: 'bottom',
fields: ['year'],
title: false
}],
series: [{
type: 'column',
axis: 'bottom',
gutter: 80,
xField: 'year',
yField: ['comedy', 'action', 'drama', 'thriller'],
stacked: true,
tips: {
trackMouse: true,
width: 65,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(String(item.value[1] / 1000000) + 'M');
}
}
}]
}
});

netemp
7 Feb 2012, 10:00 AM
Thanks for the code mitchellsimoens. But in this code, unfortunately, 'grouping' is missing.

We too were successful in creating stacked column chart by using stacked:true, but there seems to be currently no way present to have both grouped as well as stacked charts as present at this link - http://www.highcharts.com/demo/column-stacked-and-grouped

(http://www.highcharts.com/demo/column-stacked-and-grouped)Could you point us to something in this direction that how can we have both - grouped as well as stacked columns - present in the same chart.

Thanks again.

netemp
9 Feb 2012, 5:12 AM
Seems to be confirmed that currently no stacked+grouped charts possible in ExtJS. Hoping to have it in the coming releases.

ko0kiE
30 May 2012, 6:25 PM
did you come up with a solution or did you end up using a charting library like highcharts or fusioncharts?

ozlemsimsek
23 May 2014, 9:47 AM
Is it possible to have this "stacked and grouped column chart" in latest version of EXT JS?
Thanks
Ozlem

tnt9062
25 Jun 2014, 11:05 AM
I have the same problem. If I place two series with stacked bars they wrap each other. As an idea it can be possible to move bars of one series right and another left using CSS.But can't do that(

tnt9062
25 Jun 2014, 12:07 PM
did it, you can add two bar series to chart and move them to left and right using renderer like this:

renderer: function(sprite, config, rendererData, index){ var w = config.width;
config.width = 30;
config.x = config.x + (w-30)/2 - 20; <--- -20 for first bar and + 20 for second

},

49473

Sid2705
6 Jul 2015, 3:17 AM
can you please post sample code; I tried adding the renderer with not much luck

mitchellsimoens
6 Jul 2015, 4:14 AM
Using my code from the post I made 3 years ago:

Ext JS 6:

pu3

Sid2705
6 Jul 2015, 10:07 PM
I was mentioning about the grouped stack chart - I have been able to render it correctly; the only problem that now remains is to get the legend colors right (as of now they are repeating). Any ideas on how I can fix it?

Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
fields : ['year', 'comedy', 'action', 'drama',
'thriller', 'NA', 'Europe', 'Asia', 'Africa'],
data : [{
year : 2005,
comedy : 34000000,
action : 23890000,
drama : 18450000,
thriller : 20060000,
NA : 15000000,
Europe : 11000000,
Asia : 9000000,
Africa : 3000000
}, {
year : 2006,
comedy : 56703000,
action : 38900000,
drama : 12650000,
thriller : 21000000,
NA : 25000000,
Europe : 21000000,
Asia : 10000000,
Africa : 4000000
}, {
year : 2007,
comedy : 42100000,
action : 50410000,
drama : 25780000,
thriller : 23040000,
NA : 35000000,
Europe : 31000000,
Asia : 11000000,
Africa : 5000000
}, {
year : 2008,
comedy : 38910000,
action : 56070000,
drama : 24810000,
thriller : 26940000,
NA : 45000000,
Europe : 41000000,
Asia : 12000000,
Africa : 6000000
}]
});


new Ext.panel.Panel({
width : 800,
height : 400,
title : 'Stacked Bar Chart - Movies by Genre',
renderTo : Ext.getBody(),
layout : 'fit',
items : {
xtype : 'chart',
animate : true,
shadow : true,
store : store,
legend : {
position : 'right'
},
axes : [{
type : 'numeric',
position : 'left',
fields : ['comedy', 'action', 'drama',
'thriller', 'NA', 'Europe', 'Asia',
'Africa'],
title : false,
grid : true,
label : {
renderer : function(v) {
return String(v).replace(/(.)00000$/,
'.$1M');
}
},
roundToDecimal : false
}, {
type : 'category',
position : 'bottom',
fields : ['year'],
title : false
}],
series : [{
type : 'column',
axis : 'bottom',
gutter : 20,
xField : 'year',
yField : ['comedy', 'action', 'drama',
'thriller'],
stacked : true,
tips : {
trackMouse : true,
width : 65,
height : 28,
renderer : function(storeItem, item) {
this.setTitle(String(item.value[1]
/ 1000000)
+ 'M');
}
},
renderer : function(sprite, record, attributes,
index, store) {
var w = attributes.width;
attributes.width = 30;
attributes.x = attributes.x + (w - 30) / 2
- 20;
return attributes;
}
}, {
type : 'column',
axis : 'bottom',
gutter : 20,
xField : 'year',
yField : ['NA', 'Europe', 'Asia', 'Africa'],
stacked : true,
tips : {
trackMouse : true,
width : 65,
height : 28,
renderer : function(storeItem, item) {
this.setTitle(String(item.value[1]
/ 1000000)
+ 'M');
}
},
renderer : function(sprite, record, attributes,
index, store) {
var w = attributes.width;
attributes.width = 30;
attributes.x = attributes.x + (w - 30) / 2
+ 20;
return attributes;
}
}]
}
})
});