1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    10
    Vote Rating
    0
    bluezz is on a distinguished road

      0  

    Default Unanswered: Stacked columns not stacking

    Unanswered: Stacked columns not stacking


    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

    Code:
        
    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
        });

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,868
    Answers
    652
    Vote Rating
    438
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    10
    Vote Rating
    0
    bluezz is on a distinguished road

      0  

    Default


    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

    Code:
    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
        });
    };

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    10
    Vote Rating
    0
    bluezz is on a distinguished road

      0  

    Default


    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.

Thread Participants: 1

Tags for this Thread