1. #1
    Sencha User
    Join Date
    Oct 2011
    Location
    Dallas/Fort Worth
    Posts
    43
    Vote Rating
    2
    ben.gillis is on a distinguished road

      0  

    Default Unanswered: Label placement on stacked column chart

    Unanswered: Label placement on stacked column chart


    The label for a stacked column chart is not placing the label over each column. Rather, it is placing it over the lowest section of each column.

    Why doesn't the label position over the entire column?

    Code:
                        label: {
                            display: 'outside',
                            'text-anchor': 'middle',
                            field: ['Category'],
                            renderer: function (v) {
                                var total = getCategoryTotal(v)
                                return (total);
                            },
                            orientation: 'horizontal'
                        }
    
    
    ...
    
            function getCategoryTotal(category) {
                var _total = 0;
                $.each(_myData, function (i, c) {
                    if (c.Name == category) {
                        _total = c.SubtotalA+ c.SubtotalB;
                        return(false);
                    }
                });
                return (_total);
            }

    (Each column is two parts, SubTotalA and SubTotalB. SubTotalA is under SubTotalB in each column. The label ends up over SubTotalA, not over SubTotalB at the top of the column).
    Last edited by mitchellsimoens; 9 Feb 2012 at 1:21 PM. Reason: added [CODE] tags
    It's just one's and zero's, what could go wrong?

  2. #2
    Sencha User
    Join Date
    Oct 2011
    Location
    Dallas/Fort Worth
    Posts
    43
    Vote Rating
    2
    ben.gillis is on a distinguished road

      2  

    Default


    This and

    http://www.sencha.com/forum/showthread.php?132179-4.0.0-Stacked-Column-chart-label-issue&highlight=label+stacked+bar+chart

    and

    http://www.sencha.com/forum/showthread.php?211456-Stacked-Bar-Labels&highlight=label+stacked+bar+chart

    and I could put more of them up.

    unanswered for months.


    The label renderer function is useless. It passes ONLY the *value* of a field without any other context for control e.g.


    1. In the stacked bar, the label should be a TOTAL of all the bars - over the bar- and no other bar should have a label.

    2. Prevent label overlap when a bar in the stack is too short to have a label (rather, a tooltip can display that value).

    or something as simple as

    3. Is there only 1 bar or more than 1 stacked in this particular column? (Because, I can put a label on a very short bar as long as it's by itself in a column - so that it doesn't possibly overlap the label of another bar in the column).

    and more


    Labels are important to graphs, yet the more I look the more I see unanswered label questions everywhere and effectively useless examples with poor documentation.

    This is far too basic to have no answers available. Yet, this post indicates you need PREMIUM SUPPORT FOR A *LABEL*?

    http://www.sencha.com/forum/showthread.php?146204-stacked-barchart-gt-label-each-barsegment&highlight=label+stacked+bar+chart


    The very reason I have not bought premium support: Sencha's documentation is poor and the very basics aren't answered. One can't even follow a simple example (e.g. a data store reader has a 'type' in the examples, where are the options and explanations for that under data store, or reader? Many of the examples are like that.). It comes across as deliberately obscuring simple information to upsell into premium. So, what'll I get in premium support, more of the same?

    Why not offer a per-incident fixed price break/fix professional service? (All I see is hourly. And, honestly, it really motivates me to try other graphing packages first vs. something this basic requiring premium support).

    I'm better off using the time & effort in one of these other graphing packages vs. scrounging around for a stupid label on a stacked bar chart - that apparently many more posters got no answer either - or told its on the premium support plan.

    http://www.trirand.net/demochartaspnetmvc.aspx

    http://www.highcharts.com/demo/

    http://wijmo.com/demos/
    Last edited by ben.gillis; 13 Jul 2012 at 10:29 PM. Reason: Rant Simple labels too much for ExtJS4?
    It's just one's and zero's, what could go wrong?

  3. #3
    Sencha User kevin.chen's Avatar
    Join Date
    Sep 2012
    Location
    Redwood City, CA
    Posts
    242
    Vote Rating
    6
    Answers
    12
    kevin.chen is on a distinguished road

      0  

    Default


    Would you please upload entire test case?

    Thanks

  4. #4
    Sencha User kevin.chen's Avatar
    Join Date
    Sep 2012
    Location
    Redwood City, CA
    Posts
    242
    Vote Rating
    6
    Answers
    12
    kevin.chen is on a distinguished road

      0  

    Default


    The label of Ext column is designed for each staked column, every stacked column has its own lable, the proposal you asked to display the label for the the entire column of staked column is good idea. I can add a feature request for you. if I have time, I can create a workaround for you.


    since I did not receive your response, I suppose the yField: ['category', 'category2']

    so, your label should be defined as following in order to show the whole label data

    Code:
    label: {
        display: 'outside',
        'text-anchor': 'middle',
        field: ['Category','Catetory2'],
        orientation: 'horizontal'
    }

  5. #5
    Sencha User kevin.chen's Avatar
    Join Date
    Sep 2012
    Location
    Redwood City, CA
    Posts
    242
    Vote Rating
    6
    Answers
    12
    kevin.chen is on a distinguished road

      0  

    Default


    since you have two fields, the renderer doesn't make sense, right?

  6. #6
    Sencha User kevin.chen's Avatar
    Join Date
    Sep 2012
    Location
    Redwood City, CA
    Posts
    242
    Vote Rating
    6
    Answers
    12
    kevin.chen is on a distinguished road

      0  

    Default


    if you use stacked column chart and want to have a renderer for different stacked column, I have an override for you

    Code:
    Ext.define('mypatch', {
        override: 'Ext.chart.series.Column',
        onPlaceLabel: function(label, storeItem, item, i, display, animate, j, index) {
            // Determine the label's final position. Starts with the configured preferred value but
            // may get flipped from inside to outside or vice-versa depending on space.
            var me = this,
                opt = me.bounds,
                groupBarWidth = opt.groupBarWidth,
                column = me.column,
                chart = me.chart,
                chartBBox = chart.chartBBox,
                resizing = chart.resizing,
                xValue = item.value[0],
                yValue = item.value[1],
                attr = item.attr,
                config = me.label,
                rotate = config.orientation == 'vertical',
                field = [].concat(config.field),
                renderer = [].concat(config.renderer),
                format = config.renderer[index],
                text = format(storeItem.get(field[index])),
                size = me.getLabelSize(text),
                width = size.width,
                height = size.height,
                zero = opt.zero,
                outside = 'outside',
                insideStart = 'insideStart',
                insideEnd = 'insideEnd',
                offsetX = 10,
                offsetY = 6,
                signed = opt.signed,
                x, y, finalAttr;
    
    
            label.setAttributes({
                text: text
            });
    
    
            label.isOutside = false;
            if (column) {
                if (display == outside) {
                    if (height + offsetY + attr.height > (yValue >= 0 ? zero - chartBBox.y : chartBBox.y + chartBBox.height - zero)) {
                        display = insideEnd;
                    }
                } else {
                    if (height + offsetY > attr.height) {
                        display = outside;
                        label.isOutside = true;
                    }
                }
                x = attr.x + groupBarWidth / 2;
                y = display == insideStart ?
                    (zero + ((height / 2 + 3) * (yValue >= 0 ? -1 : 1))) :
                    (yValue >= 0 ? (attr.y + ((height / 2 + 3) * (display == outside ? -1 : 1))) :
                        (attr.y + attr.height + ((height / 2 + 3) * (display === outside ? 1 : -1))));
            }
            else {
                if (display == outside) {
                    if (width + offsetX + attr.width > (yValue >= 0 ? chartBBox.x + chartBBox.width - zero : zero - chartBBox.x)) {
                        display = insideEnd;
                    }
                }
                else {
                    if (width + offsetX > attr.width) {
                        display = outside;
                        label.isOutside = true;
                    }
                }
                x = display == insideStart ?
                    (zero + ((width / 2 + 5) * (yValue >= 0 ? 1 : -1))) :
                    (yValue >= 0 ? (attr.x + attr.width + ((width / 2 + 5) * (display === outside ? 1 : -1))) :
                        (attr.x + ((width / 2 + 5) * (display === outside ? -1 : 1))));
                y = attr.y + groupBarWidth / 2;
            }
            //set position
            finalAttr = {
                x: x,
                y: y
            };
            //rotate
            if (rotate) {
                finalAttr.rotate = {
                    x: x,
                    y: y,
                    degrees: 270
                };
            }
            //check for resizing
            if (animate && resizing) {
                if (column) {
                    x = attr.x + attr.width / 2;
                    y = zero;
                } else {
                    x = zero;
                    y = attr.y + attr.height / 2;
                }
                label.setAttributes({
                    x: x,
                    y: y
                }, true);
                if (rotate) {
                    label.setAttributes({
                        rotate: {
                            x: x,
                            y: y,
                            degrees: 270
                        }
                    }, true);
                }
            }
            //handle animation
            if (animate) {
                me.onAnimate(label, { to: finalAttr });
            }
            else {
                label.setAttributes(Ext.apply(finalAttr, {
                    hidden: false
                }), true);
            }
        }
    })

  7. #7
    Sencha User kevin.chen's Avatar
    Join Date
    Sep 2012
    Location
    Redwood City, CA
    Posts
    242
    Vote Rating
    6
    Answers
    12
    kevin.chen is on a distinguished road

      0  

    Default


    in this case, you label should be defined as following


    Code:
                    label: {
                      display: 'insideEnd',
                      'text-anchor': 'middle',
                        field: ['data1','data2'],
                        renderer: [function(data1){return 2}, function(data2){return 3}],
                        orientation: 'vertical',
                        color: '#333'
                    },

  8. #8
    Sencha User kevin.chen's Avatar
    Join Date
    Sep 2012
    Location
    Redwood City, CA
    Posts
    242
    Vote Rating
    6
    Answers
    12
    kevin.chen is on a distinguished road

      0  

    Default


    and all of you column label renderer have to be an array after apply this override even not stacked column

  9. #9
    Sencha User
    Join Date
    Oct 2011
    Location
    Dallas/Fort Worth
    Posts
    43
    Vote Rating
    2
    ben.gillis is on a distinguished road

      0  

    Default


    Yes, I am waiting for a Standard Support confirmation from Sencha. Then, will provide a URL to an example of what we're trying to fix: getting a total label over a stacked bar.
    It's just one's and zero's, what could go wrong?

  10. #10
    Sencha User kevin.chen's Avatar
    Join Date
    Sep 2012
    Location
    Redwood City, CA
    Posts
    242
    Vote Rating
    6
    Answers
    12
    kevin.chen is on a distinguished road

      0  

    Default


    the override I provided is for Extjs 4.1.2

Thread Participants: 1