Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: How to create a stacked and grouped column chart?

  1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    2
      0  

    Default Unanswered: How to create a stacked and grouped column chart?

    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/colum...ed-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

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,339
    Answers
    3887
    Vote Rating
    1297
      0  

    Default

    This is using the Stacked Bar chart example that I modified to be a stacked column chart

    Code:
        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');
                        }
                    }
                }]
            }
        });
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    2
      0  

    Default Thanks for sharing the code mitchellsimoens

    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

    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.

  4. #4
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    2
      0  

    Default Looks like confirmed

    Seems to be confirmed that currently no stacked+grouped charts possible in ExtJS. Hoping to have it in the coming releases.

  5. #5
    Ext JS Premium Member
    Join Date
    Aug 2007
    Posts
    54
    Vote Rating
    0
      0  

    Default

    did you come up with a solution or did you end up using a charting library like highcharts or fusioncharts?

  6. #6
    Sencha Premium Member
    Join Date
    Apr 2012
    Location
    London
    Posts
    14
    Vote Rating
    0
      0  

    Default stacked and grouped column chart

    Is it possible to have this "stacked and grouped column chart" in latest version of EXT JS?

    Thanks
    Ozlem

  7. #7
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    35
    Answers
    1
    Vote Rating
    2
      0  

    Default

    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(

  8. #8
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    35
    Answers
    1
    Vote Rating
    2
      0  

    Default

    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

    },

    z.png

  9. #9
    Sencha User
    Join Date
    Dec 2014
    Posts
    2
    Vote Rating
    0
      0  

    Default

    can you please post sample code; I tried adding the renderer with not much luck

  10. #10
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,339
    Answers
    3887
    Vote Rating
    1297
      0  

    Default

    Using my code from the post I made 3 years ago:

    Ext JS 6:

    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Page 1 of 2 12 LastLast

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
  •