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
    37,647
    Vote Rating
    899
    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
    977
    Vote Rating
    113
    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