You found a bug! We've classified it as EXTJS-5637 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Nov 2010
    Posts
    12
    Vote Rating
    3
    Moinois is on a distinguished road

      2  

    Question [EXT4.1 RC1] Ext.chart.series.Line label position doesn't seem to work as intended

    [EXT4.1 RC1] Ext.chart.series.Line label position doesn't seem to work as intended


    REQUIRED INFORMATIONExt version tested:
    • Ext 4.1 RC1
    Browser versions tested against:
    • Chrome 17
    • IE9
    • FF9 (firebug 1.9.1 installed)
    • Safari 5
    • Opera 11
    DOCTYPE tested against:
    • strict
    Description:
    • When setting the label display of a line series to over or under it renders the label at the top of the graph
    • If the chart is animated the labels doesn't show up at all until you reload the data
    Steps to reproduce the problem:
    • Create a Lines series with a label where display is set to over or under.
    The result that was expected:
    • A value label just over each data point of the data1 series.
    The result that occurs instead:
    • A value label at the top of the graph area for each point.
    Test Case:

    Code:
    Ext.require('Ext.chart.*');
    Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
    
    Ext.onReady(function () {
    
    
        window.generateData = function(n, floor){
            var data = [],
                p = (Math.random() *  11) + 1,
                i;
                
            floor = (!floor && floor !== 0)? 20 : floor;
            
            for (i = 0; i < (n || 12); i++) {
                data.push({
                    name: Ext.Date.monthNames[i % 12],
                    data1: Math.floor(Math.max((Math.random() * 100), floor)),
                    data2: Math.floor(Math.max((Math.random() * 100), floor)),
                    data3: Math.floor(Math.max((Math.random() * 100), floor)),
                    data4: Math.floor(Math.max((Math.random() * 100), floor)),
                    data5: Math.floor(Math.max((Math.random() * 100), floor)),
                    data6: Math.floor(Math.max((Math.random() * 100), floor)),
                    data7: Math.floor(Math.max((Math.random() * 100), floor)),
                    data8: Math.floor(Math.max((Math.random() * 100), floor)),
                    data9: Math.floor(Math.max((Math.random() * 100), floor))
                });
            }
            return data;
        };
        
        window.generateDataNegative = function(n, floor){
            var data = [],
                p = (Math.random() *  11) + 1,
                i;
                
            floor = (!floor && floor !== 0)? 20 : floor;
                
            for (i = 0; i < (n || 12); i++) {
                data.push({
                    name: Ext.Date.monthNames[i % 12],
                    data1: Math.floor(((Math.random() - 0.5) * 100), floor),
                    data2: Math.floor(((Math.random() - 0.5) * 100), floor),
                    data3: Math.floor(((Math.random() - 0.5) * 100), floor),
                    data4: Math.floor(((Math.random() - 0.5) * 100), floor),
                    data5: Math.floor(((Math.random() - 0.5) * 100), floor),
                    data6: Math.floor(((Math.random() - 0.5) * 100), floor),
                    data7: Math.floor(((Math.random() - 0.5) * 100), floor),
                    data8: Math.floor(((Math.random() - 0.5) * 100), floor),
                    data9: Math.floor(((Math.random() - 0.5) * 100), floor)
                });
            }
            return data;
        };
    
        window.store1 = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
            data: generateData()
        });
        window.storeNegatives = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
            data: generateDataNegative()
        });
        window.store3 = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
            data: generateData()
        });
        window.store4 = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
            data: generateData()
        });
        window.store5 = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
            data: generateData()
        });    
        
        
    
    
        store1.loadData(generateData(8));
        
        var win = Ext.create('Ext.Window', {
            width: 800,
            height: 600,
            minHeight: 400,
            minWidth: 550,
            hidden: false,
            maximizable: true,
            title: 'Line Chart',
            renderTo: Ext.getBody(),
            layout: 'fit',
            tbar: [{
                text: 'Reload Data',
                handler: function() {
                    store1.loadData(generateData(8));
                }
            }],
            items: {
                xtype: 'chart',
                style: 'background:#fff',
                animate: true,
                store: store1,
                shadow: true,
                theme: 'Category1',
                legend: {
                    position: 'right'
                },
                axes: [{
                    type: 'Numeric',
                    minimum: 0,
                    position: 'left',
                    fields: ['data1', 'data2', 'data3'],
                    title: 'Number of Hits',
                    minorTickSteps: 1,
                    grid: {
                        odd: {
                            opacity: 1,
                            fill: '#ddd',
                            stroke: '#bbb',
                            'stroke-width': 0.5
                        }
                    }
                }, {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Month of the Year'
                }],
                series: [{
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    xField: 'name',
                    yField: 'data1',
                    markerConfig: {
                        type: 'cross',
                        size: 4,
                        radius: 4,
                        'stroke-width': 0
                    },
    				label: {
    					display: 'over',
    					'text-anchor': 'middle',
    					field: 'data1',
    					orientation: 'horizontal'
    				}
                }, {
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    smooth: true,
                    xField: 'name',
                    yField: 'data2',
                    markerConfig: {
                        type: 'circle',
                        size: 4,
                        radius: 4,
                        'stroke-width': 0
                    }
                }, {
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    smooth: true,
                    fill: true,
                    xField: 'name',
                    yField: 'data3',
                    markerConfig: {
                        type: 'circle',
                        size: 4,
                        radius: 4,
                        'stroke-width': 0
                    }
                }]
            }
        });
    });

    HELPFUL INFORMATION
    [/COLOR]
    Screenshot or Video:
    [/B]Linebug.jpg
    Debugging already done:
    • In \src\chart\series\Line on row 840 the y coordinate is adjusted, but the y coordinate is a string.
    • Looking in the same file on row 492 the y coordinate is trimmed down to two decimals, but the method .toFixed() returns a string.
    Possible fix:
    • Either to a parseFloat() at line 840 that will solve the direct problem - OR -
    • Do a parseFloat at line 492 to fix it at the source. This might break other things though so I'm not sure.
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • Windows 7 Professional

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,801
    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

      -2  

    Default


    Thanks for the report.
    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
    Jun 2008
    Posts
    138
    Vote Rating
    7
    jchau is an unknown quantity at this point

      0  

    Default


    been over a year and chart label for line series still not fixed. what's the status on this?

  4. #4
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  5. #5
    Sencha User
    Join Date
    Jun 2008
    Posts
    138
    Vote Rating
    7
    jchau is an unknown quantity at this point

      0  

    Default


    any update to this? it's very unprofessional to release a charting package that can't even render labels...

  6. #6
    Sencha User
    Join Date
    Jun 2008
    Posts
    138
    Vote Rating
    7
    jchau is an unknown quantity at this point

      0  

    Default


    two years now, is this fixed yet?

Thread Participants: 3

Tags for this Thread

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