Results 1 to 4 of 4

Thread: Stacked columns not stacking

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    10
    Vote Rating
    0
      0  

    Default 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
    9,390
    Answers
    716
    Vote Rating
    498
      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
      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
      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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •