Results 1 to 6 of 6

Thread: Ext.chart.Legend - reverse items order

  1. #1
    Sencha User
    Join Date
    Dec 2008
    Posts
    19
    Answers
    2

    Default Answered: Ext.chart.Legend - reverse items order

    Hi,

    I have a stacked Column Chart, which displays the first item at the bottom of a bar and the last on top. My issue is that when displaying a legend to the right (or left) the first items are displayed in a reversed order: first item is on top and last at the bottom. This is confusing to the eye.

    Looking at the code, there doesn't seem to be an option to reverse the legend items order. Other than making a dirty hack, like overriding the private createItems method in a custom class, is there a better way to accomplish this ?

    http://docs.sencha.com/ext-js/4-1/so...od-createItems

    Thanks,

    Alexandre

  2. I've got not other choice to make the hack. Here's an example of use follow by the hack in question in case someone is interested.

    Code:
    Ext.create('Ext.chart.Chart',{
        renderTo:Ext.getBody(),
        width:500,
        height:300,
        animate:true,
        store: store,
        shadow:true,
        theme:'Category1',
        legend:{
            position:'right',
            reverseFields: true // <---
        },
        axes:...,
        series:...
    });
    
    Code:
    /**
     * @cfg {Boolean} reverseFields
     * Whether to create the legend item fields in reverse positions or not.
     */
    Ext.chart.Legend.prototype.reverseFields = false;
    
    
    // NOTE: This is a private method complete override. Tested with 4.1.1a.
    Ext.chart.Legend.prototype.createItems = function() {
        var me = this,
            chart = me.chart,
            seriesItems = chart.series.items,
            ln, series,
            surface = chart.surface,
            items = me.items,
            padding = me.padding,
            itemSpacing = me.itemSpacing,
            spacingOffset = 2,
            maxWidth = 0,
            maxHeight = 0,
            totalWidth = 0,
            totalHeight = 0,
            vertical = me.isVertical,
            math = Math,
            mfloor = math.floor,
            mmax = math.max,
            index = 0,
            i = 0,
            len = items ? items.length : 0,
            reverseFields = me.reverseFields,
            x, y, spacing, item, bbox, height, width,
            fields, field, nFields, j;
    
    
        //remove all legend items
        if (len) {
            for (; i < len; i++) {
                items[i].destroy();
            }
        }
        //empty array
        items.length = [];
        // Create all the item labels, collecting their dimensions and positioning each one
        // properly in relation to the previous item
        var createField = function(field, j, k) {
            item = new Ext.chart.LegendItem({
                legend: me,
                series: series,
                surface: chart.surface,
                yFieldIndex: j
            });
            bbox = item.getBBox();
    
    
            //always measure from x=0, since not all markers go all the way to the left
            width = bbox.width;
            height = bbox.height;
    
    
            if (reverseFields) {
                if (i + k === 0) {
                    spacing = vertical ? padding + height / 2 : padding;
                }
                else {
                    spacing = itemSpacing / (vertical ? 2 : 1);
                }
            } else {
                if (i + j === 0) {
                    spacing = vertical ? padding + height / 2 : padding;
                }
                else {
                    spacing = itemSpacing / (vertical ? 2 : 1);
                }
            }
            // Set the item's position relative to the legend box
            item.x = mfloor(vertical ? padding : totalWidth + spacing);
            item.y = mfloor(vertical ? totalHeight + spacing : padding + height / 2);
    
    
            // Collect cumulative dimensions
            totalWidth += width + spacing;
            totalHeight += height + spacing;
            maxWidth = mmax(maxWidth, width);
            maxHeight = mmax(maxHeight, height);
    
    
            items.push(item);
        };
    
    
        for (i = 0, ln = seriesItems.length; i < ln; i++) {
            series = seriesItems[i];
            if (series.showInLegend) {
                fields = [].concat(series.yField);
                var k = 0;
                if (reverseFields) {
                    for (j = fields.length - 1, len = 0; j >= len; j--) {
                        createField(fields[j], j, k);
                        k++;
                    }
                } else {
                    for (j = 0, nFields = fields.length; j < nFields; j++) {
                        createField(fields[j], j, k);
                    }
                }
            }
        }
    
    
        // Store the collected dimensions for later
        me.width = mfloor((vertical ? maxWidth : totalWidth) + padding * 2);
        if (vertical && items.length === 1) {
            spacingOffset = 1;
        }
        me.height = mfloor((vertical ? totalHeight - spacingOffset * spacing : maxHeight) + (padding * 2));
        me.itemHeight = maxHeight;
    };

  3. #2
    Sencha User
    Join Date
    Dec 2008
    Posts
    19
    Answers
    2

    Default

    Any hint about this issue ?

  4. #3
    Sencha User
    Join Date
    Dec 2008
    Posts
    19
    Answers
    2

    Default

    I've got not other choice to make the hack. Here's an example of use follow by the hack in question in case someone is interested.

    Code:
    Ext.create('Ext.chart.Chart',{
        renderTo:Ext.getBody(),
        width:500,
        height:300,
        animate:true,
        store: store,
        shadow:true,
        theme:'Category1',
        legend:{
            position:'right',
            reverseFields: true // <---
        },
        axes:...,
        series:...
    });
    
    Code:
    /**
     * @cfg {Boolean} reverseFields
     * Whether to create the legend item fields in reverse positions or not.
     */
    Ext.chart.Legend.prototype.reverseFields = false;
    
    
    // NOTE: This is a private method complete override. Tested with 4.1.1a.
    Ext.chart.Legend.prototype.createItems = function() {
        var me = this,
            chart = me.chart,
            seriesItems = chart.series.items,
            ln, series,
            surface = chart.surface,
            items = me.items,
            padding = me.padding,
            itemSpacing = me.itemSpacing,
            spacingOffset = 2,
            maxWidth = 0,
            maxHeight = 0,
            totalWidth = 0,
            totalHeight = 0,
            vertical = me.isVertical,
            math = Math,
            mfloor = math.floor,
            mmax = math.max,
            index = 0,
            i = 0,
            len = items ? items.length : 0,
            reverseFields = me.reverseFields,
            x, y, spacing, item, bbox, height, width,
            fields, field, nFields, j;
    
    
        //remove all legend items
        if (len) {
            for (; i < len; i++) {
                items[i].destroy();
            }
        }
        //empty array
        items.length = [];
        // Create all the item labels, collecting their dimensions and positioning each one
        // properly in relation to the previous item
        var createField = function(field, j, k) {
            item = new Ext.chart.LegendItem({
                legend: me,
                series: series,
                surface: chart.surface,
                yFieldIndex: j
            });
            bbox = item.getBBox();
    
    
            //always measure from x=0, since not all markers go all the way to the left
            width = bbox.width;
            height = bbox.height;
    
    
            if (reverseFields) {
                if (i + k === 0) {
                    spacing = vertical ? padding + height / 2 : padding;
                }
                else {
                    spacing = itemSpacing / (vertical ? 2 : 1);
                }
            } else {
                if (i + j === 0) {
                    spacing = vertical ? padding + height / 2 : padding;
                }
                else {
                    spacing = itemSpacing / (vertical ? 2 : 1);
                }
            }
            // Set the item's position relative to the legend box
            item.x = mfloor(vertical ? padding : totalWidth + spacing);
            item.y = mfloor(vertical ? totalHeight + spacing : padding + height / 2);
    
    
            // Collect cumulative dimensions
            totalWidth += width + spacing;
            totalHeight += height + spacing;
            maxWidth = mmax(maxWidth, width);
            maxHeight = mmax(maxHeight, height);
    
    
            items.push(item);
        };
    
    
        for (i = 0, ln = seriesItems.length; i < ln; i++) {
            series = seriesItems[i];
            if (series.showInLegend) {
                fields = [].concat(series.yField);
                var k = 0;
                if (reverseFields) {
                    for (j = fields.length - 1, len = 0; j >= len; j--) {
                        createField(fields[j], j, k);
                        k++;
                    }
                } else {
                    for (j = 0, nFields = fields.length; j < nFields; j++) {
                        createField(fields[j], j, k);
                    }
                }
            }
        }
    
    
        // Store the collected dimensions for later
        me.width = mfloor((vertical ? maxWidth : totalWidth) + padding * 2);
        if (vertical && items.length === 1) {
            spacingOffset = 1;
        }
        me.height = mfloor((vertical ? totalHeight - spacingOffset * spacing : maxHeight) + (padding * 2));
        me.itemHeight = maxHeight;
    };

  5. #4
    Sencha User
    Join Date
    Oct 2008
    Posts
    1

    Default

    Thanks for sharing. Custom hack works fine still in 4.2.

  6. #5
    Sencha User
    Join Date
    Dec 2008
    Posts
    19
    Answers
    2

    Default

    Thanks for replying as well, chan111. Would you please mark the post containing the snippet as best answer to the thread ?Again, thanks. It's always nice to see that a thread this old can still be of use.

  7. #6
    Sencha User
    Join Date
    Dec 2008
    Posts
    19
    Answers
    2

    Default

    Nevermind, I was able to mark the anwser as best

Posting Permissions

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