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
    36,801
    Answers
    3467
    Vote Rating
    834
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi