Stacked columns not stacking

[bluezz]

I am trying to create a simple stacked column chart something similar to:
http://www.rahulsingla.com/blog/2011...ultiple-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?

overlapping_columns.jpg

    
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]

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...tackedBar.html

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

Regards,
Scott

[bluezz]

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:

overlapping_columns3.jpg

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]

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.