1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    9
    Vote Rating
    0
    kpython is on a distinguished road

      0  

    Default Unanswered: Legend and label on bar chart - Error or bug ?

    Unanswered: Legend and label on bar chart - Error or bug ?


    Hi everybody,

    I have several problems with bar chart. I'm trying to rendering a bar chart with 2 y value for the same x value. Exactly like in this example : http://try.sencha.com/extjs/4.0.7/examples/charts/groupedbar/

    My application is available here so you can show the difference :


    1. Legend
    Why is my legend rendering like this an not in the usual form ? Strange !
    Capture d’écran 2013-01-23 à 16.50.02.jpg

    And if I choose to display just one bar, the label of the second bar still showing ! And worse, the horizontally axis is not dynamically resized, like in the example above.
    Capture d’écran 2013-01-23 à 16.51.06.jpg


    2.Label
    You probably saw that in my picture, the same label is displayed for both bar.. That's because in my series I defined label like this:
    Code:
    labelField: ['e'],
    And if I do something like that
    Code:
    labelField: ['e','eOld'],
    labels are not displayed anymore


    I really need help with this problem Thank you for your help.

    Here the code:
    Code:
    Ext.define("iSmart.view.Week", {    requires: [
            'Ext.chart.label.Label',
            'Ext.util.Format',
            'Ext.chart.interactions.ItemHighlight'
        ],
        extend: 'Ext.Panel',
        xtype: 'weekView',
        alias: "widget.week",
    
    
        
        config: {
            layout: 'vbox',
            //iconCls: 'time',
            title: 'Tage',
            animate: true,
            items: [{
                xtype: 'label',
                id: 'totalLastDays',
                html : '',
                flex: 1
            },{
                xtype: 'toolbar',
                docked: "top",
                items: [{
                    xtype: 'spacer'
                },{
                    xtype: 'label',
                    id: 'lastDayLabel',
                    html: ''
                },{
                    xtype: 'spacer'
                }]
            },{
                xtype: 'chart',
                flex: 50,
                store: 'weekStore',
                
                innerPadding: {
                    top:15,
                    right: 5
                },
                interactions:[
                    {
                        type: 'panzoom',
                        panGesture: 'none'
                    },'itemhighlight'
                ],
                //selection: null,
                legend: {
                    position: 'bottom'
                },
                axes: [{
                    // y-axsis
                    type: 'numeric',
                    minimum: 0,
                    position: 'left',
                    grid: true,
                    title: {
                        text:  'Energie [kWh]',
                        font: '14px Helvetica'
                    },
                    label: {
                        font: '12px Helvetica'
                    },
                    style: {
                        estStepSize: 20
                    }
                }, 
                {
                    // x-axis
                    type: 'category',
                    position: 'bottom',
                    style: {
                        estStepSize: 16
                    },
                    label: {
                        font: '12px Helvetica'
                    }
                }],
                series: [{
                    type: 'bar',
                    xField: 'd',
                    yField: ['eOld','e'],
                    axis: 'left',
                    highlightCfg: {
                        shadowColor: 'black',
                        strokeStyle: 'white',
                        shadowBlur: 15,
                        Index: 15,
                        fill: '#dd8',
                        lineWidth: 2
                    },
                    labelField: ['eOld','e'],
                    subStyle: {
                        stroke: ["#bfe6ff","#086fb2"],
                        fillStyle: ["bfe6ff","#086fb2"]
                    },
                    style: {
                        minGapWidth: 10
                    },
                    stacked: false,
                    label: {
                        display: 'outside',
                        'text-anchor': 'middle',
                        orientation: 'vertical',
                        font: '12px Helvetica'
                    }
                }]
            }]
        }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    It sounds like it's not really a bug per se but the labelField needs to support an array. The documentation does state that labelField supports only a string.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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
    Dec 2012
    Posts
    9
    Vote Rating
    0
    kpython is on a distinguished road

      0  

    Default


    Thank you for your response.

    So if it's only support a string, is there a way to display a label for each bar ?

    And about this legend, why does it appear like this?

  4. #4
    Sencha User
    Join Date
    Nov 2007
    Posts
    62
    Answers
    1
    Vote Rating
    0
    ljadrbln is on a distinguished road

      0  

    Default


    Hi kpython,

    I made a quick workaround for this problem.
    I tested this function only for Bar-chart.

    Just require this file to your project.

    Hope it helps:

    Code:
    Ext.define('MyApp.view.Series', {
        override: 'Ext.chart.series.Series',
    
        updateLabelData: function () {
            var me = this,
                store = me.getStore(),
                items = store.getData().items,
                sprites = me.getSprites(),
                labelField = me.getLabelField(),
                i, j, ln, ln2, labels;
    
            if (sprites.length > 0 && labelField) {
                labels = [];
    
                if(!Ext.isArray(labelField)){
                    labelField = new Array(labelField);
                }
    
                for(i = 0, ln = items.length; i < ln; i++){
                    for(j = 0, ln2 = labelField.length; j < ln2; j++){
                        labels.push(items[i].get(labelField[j]));
                    }
                }
    
                for (i = 0, ln = sprites.length; i < ln; i++) {
                    sprites[i].setAttributes({labels: [labels[i]]});
                }
            }
        }
    });

  5. #5
    Sencha User
    Join Date
    Dec 2012
    Posts
    9
    Vote Rating
    0
    kpython is on a distinguished road

      0  

    Default


    Thank you for your response !

    Effectively it's helped ! But only for the first 2 bar ? :/

    Capture d’&#233;cran 2013-02-22 &#224; 21.54.44.jpg

  6. #6
    Sencha User
    Join Date
    Jul 2010
    Posts
    18
    Vote Rating
    0
    Alessandro.Prandini is on a distinguished road

      0  

    Default


    I have the same problem and with this solution I get labels only on first grouped bars.

  7. #7
    Sencha User
    Join Date
    Jul 2010
    Posts
    18
    Vote Rating
    0
    Alessandro.Prandini is on a distinguished road

      0  

    Default


    Solution to my case.

    Topic