PDA

View Full Version : Stacked columns not stacking



bluezz
27 Apr 2012, 9:59 AM
I am trying to create a simple stacked column chart something similar to:
http://www.rahulsingla.com/blog/2011/04/extjs-4-vertically-stacked-side-by-side-multiple-charts

I keep getting my columns to overlap each other instead of stacking. I have "highlight: true" so you can clearly see how multiple columns are overlapping each other.
Another problem (not sure if its related to the stacking problem) is that the colors of each series is displayed the same. I have tried setting the color explicitly in the series loop but they all get the same color always.
Can someone please help me figure out the problem?

34628



var fields2 = [];
for (var i = 0; i < data2.length; i++){
var pt = data2[i];
for (var prop in pt){
if (fields2.indexOf(prop) === -1)
fields2.push(prop);
}
}


var series2 = [];
for (var i = 0; i < fields2.length; i++){
if (fields2[i] !== 'x'){
series2.push({
type: 'column',
column: true,
displayName: fields2[i],
yField: fields2[i],
xField: 'x',
fill: true,
axis: 'left',
stacked: true,
highlight: true,
tips: {
trackMouse: true,
width: 65,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(String(item.value[1]));
}
}
});
}
}

var store1 = Ext.create('Ext.data.JsonStore', {
fields: fields2,
data: data2
});

scottmartin
27 Apr 2012, 10:29 AM
It would be difficult to resolve this with only partial code. Please have a look at the following example:
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/charts/StackedBar.html

If this does not help, please provide a small working example with data so we can proceed.

Regards,
Scott

bluezz
27 Apr 2012, 11:34 AM
Sure, here's my function which renders my chart window. I've put fake values for data and fields (from the sample) but the result is the same:

34637



showChartAll = function(title2){

var data3= [];
data3.push({year: 2005, comedy: 34, action: 23, drama: 18, thriller: 20},
{year: 2006, comedy: 56, action: 38, drama: 12, thriller: 21},
{year: 2007, comedy: 42, action: 50, drama: 25, thriller: 23},
{year: 2008, comedy: 38, action: 56, drama: 24, thriller: 26});

var fields3 = [];
for (var i = 0; i < data3.length; i++){
var pt = data3[i];
for (var prop in pt){
if (fields3.indexOf(prop) === -1)
fields3.push(prop);
}
}
console.log(fields3);
console.log(data3);
var series2 = [];
for (var i = 0; i < fields3.length; i++){
if (fields3[i] !== 'year'){
series2.push({
type: 'column',
column: true,
displayName: fields3[i],
yField: fields3[i],
xField: 'year',
fill: true,
stacked: true,
highlight: true,
tips: {
trackMouse: true,
width: 65,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(String(item.value[1]));
}
}
});
}
}

var store1 = Ext.create('Ext.data.JsonStore', {
fields: fields3,
data: data3
});

fields3.splice(fields3.indexOf("year"), 1);

var chart2 = Ext.create('Ext.chart.Chart', {
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: store1,
shadow: true,
theme: 'Category1',
legend: {
position: 'bottom'
},
axes: [{
type: 'Numeric',
position: 'left',
fields: fields3,
title: 'Hits'
}, {
type: 'Category',
position: 'bottom',
fields: ['year'],
title: 'Month'
}],
series: series2
});

var win = Ext.create('Ext.Window', {
width: 900,
height: 500,
hidden: false,
maximizable: true,
title: title2,
renderTo: Ext.getBody(),
layout: 'fit',
items: chart2
});
};

bluezz
27 Apr 2012, 12:38 PM
I realized the problem and resolved it. I was creating multiple series (in the for loop) with one field in it each where I was supposed to create one series with all the fields in it.