Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-4332 in a recent build.
  1. #1
    Ext JS Premium Member
    Join Date
    May 2011
    Posts
    25
    Vote Rating
    0
    uzer is on a distinguished road

      0  

    Default [Bug ExtJS 4.x Charts - Numeric Axis]

    [Bug ExtJS 4.x Charts - Numeric Axis]


    REQUIRED INFORMATION Ext version tested:
    • Ext 4.0.2
    Browser versions tested against:
    • ____
    • IE9
    • FF4.0, FF 5.0 (firebug installed)
    • Chrome 12.0.742.100
    Description:
    • There is overlap of the top and second largest labels on a vertical axis when numeric values are automatically calculated. The Top value is being aligned by the top of the text while the remaining labels are aligned by the vertical center of the text, so depending on the number of major tics
      generated and the overall height of the chart, this problem occurs intermittently.
    Steps to reproduce the problem:
    • create a chart with a numeric axis
    • do not set max manually
    The result that was expected:
    • Axis labels do not overlap (at the top)
    The result that occurs instead:
    • overlap
    Test Case:
    Code:
        axes: [{
                        type: 'Numeric',
                        position: 'left',
                        fields: ['sales'],
                        minimum: 0,
                        title: 'Sales $',
                        grid: {
                            odd: {
                                stroke: '#d3d3d3'
                            },
                            even: {
                                stroke: '#d3d3d3'
                            }
                        }
                    }, {
                        type: 'Category',
                        position: 'bottom',
                        fields: ['Server'],
                        title: 'Server',
                        label: {
                               rotate: {
                                       degrees: -90                            
                               } 
                        }   
                    }],
                    series: [{
                        type: 'column',
                        axis: 'left',
                        highlight: true,
                        label: {
                          display: 'insideEnd',
                          'text-anchor': 'middle',
                            field: 'sales',
                            orientation: 'vertical',
                            fill: '#eee',
                            font: '10px Arial'
                        },
                        renderer: function(sprite, storeItem, barAttr, i, store) {
                            barAttr.fill = colors[i % colors.length];
                            return barAttr;
                        },
                        style: {
                            opacity: 0.95
                        },
                        xField: 'Server',
                        yField: 'sales'
                    }]
    HELPFUL INFORMATION Screenshot or Video:
    • senchaBugAxis.jpg
    Possible fix:
    • problem addressed and fixed in extJS 3.x
    Operating System:
    • Windows 7
    Attached Images

  2. #2
    Sencha - Support Team mike.estes's Avatar
    Join Date
    Mar 2011
    Location
    Redwood City, CA
    Posts
    220
    Vote Rating
    8
    mike.estes will become famous soon enough

      0  

    Default


    @uzer, thanks for the report and for using the template format. Could you expand your test case to be complete and easily runnable? We use these test cases directly in the process of confirming a bug and when confirming the fix for the bug, it is important that the test case be as close as possible to actual usage. In this case your example should include the chart and store configuration with local data. Thanks in advance!

  3. #3
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    5
    Vote Rating
    0
    cfrerebeau is on a distinguished road

      0  

    Default Same Issue

    Same Issue


    I have exactly the same issue and it's happening on both vertical and horizontal Numeric Axis. It happen for me with any data set I used. I am using 4.02
    Code:
    Ext.define('chartModel', {
        extend: 'Ext.data.Model',
        fields: ['key', 'count']
    });
    
     var chartStore = Ext.create('Ext.data.Store',
                {
                    model: 'chartModel',
                    data: [{key:1,count:400},
                              {key:2,count:1500},
                              {key:3,count:2}]
                });
    
    
            this.chart = Ext.create('Ext.chart.Chart', {
                renderTo: "div-id",
                width: 220,
                height: 100,
                theme:"Blue",
                store: chartStore,
                animate:true,
                axes: [
                    {
                        type: 'Numeric',
                        position: 'left',
                        fields: ['count'],
                        minimum: 0,
                        label: {
                            font: '10px Arial'
                        }
                    },
                    {
                        type: 'Numeric',
                        position: 'bottom',
                        fields: ['key'],
                        label: {
                            font: '10px Arial'
                        }
                    }
                ],
                series: [
                    {
                        type: 'area',
                        xField: 'key',
                        yField: 'count',
                        showMarkers :false
                    }
                ]
            });

  4. #4
    Ext JS Premium Member
    Join Date
    May 2011
    Posts
    25
    Vote Rating
    0
    uzer is on a distinguished road

      0  

    Default Results with almost every data set...

    Results with almost every data set...


    cfrerebeau is exactly right. The data points aren't as important as what Ext chooses for the maximum on the axis, the number of major tics, and the height for the vertical axis... For me, a maximum of 2000 yields labeled tic marks for 200, 400, 600, 800, ... , 1800, and 2000. For the allowed height, there was no overlap for the calculated tic marks, with exception of 1800 and 2000.

    I did see while researching a potential workaround that the same bug was identified and fixed in Ext 3.x... Perhaps that would be a useful reference. What is happening is that the alignment for the maximum label is not based on the vertical centerline, but instead the label 'top' is aligned with the tic mark... thus the overlap.

  5. #5
    Ext JS Premium Member
    Join Date
    May 2011
    Posts
    25
    Vote Rating
    0
    uzer is on a distinguished road

      0  

    Exclamation I followed the format, please add...

    I followed the format, please add...


    Any data store will work.... my example is running off of live data, but you can easily reproduce this bug with your randomly generated data points. It is unreasonable for you to flag this post as not containing enough information.

    Please remove the flag.

  6. #6
    Ext JS Premium Member
    Join Date
    May 2011
    Posts
    25
    Vote Rating
    0
    uzer is on a distinguished road

      0  

    Default


    Mike, please remove the flag on this bug request, as the data points are not central to replicating the bug, nor necessary to address it. Use any data store available. This bug occurs on 3/5 data sets i pass it.

  7. #7
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    5
    Vote Rating
    0
    cfrerebeau is on a distinguished road

      0  

    Default Resolved

    Resolved


    On my end, I figured out that one of the stylesheet was not up-to-date and that's why I was getting the issue. Once Ext js style were applied correctly the issue never happened again.

  8. #8
    Ext JS Premium Member
    Join Date
    May 2011
    Posts
    25
    Vote Rating
    0
    uzer is on a distinguished road

      0  

    Default


    Sencha updates to style source? I believe I have the latest version... What did you have to do to apply the style 'correctly?'

    When working correctly, does the label for the axis max align differently, does it not appear at all, does Ext adjust the number of major tics, or does the tic label immediately below the maximum label disappear?

  9. #9
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,317
    Vote Rating
    23
    arthurakay has a spectacular aura about arthurakay has a spectacular aura about arthurakay has a spectacular aura about

      0  

    Default


    I just stumbled across this thread... apologies that it has not been added to our bug tracker yet. I will try to escalate this issue.

    In testing myself (for all of 2 minutes), I used the following code to reproduce the case in 4.0.7:

    PHP Code:
    Ext.onReady(function(){
        
    Ext.define('chartModel', {
            
    extend 'Ext.data.Model',
            
    fields : ['key''count']
        });

         var 
    chartStore Ext.create('Ext.data.Store', {
            
    model'chartModel',
            
    data: [
                {
    key 1count 400  },
                {
    key 2count 1500 },
                {
    key 3count 2    }
            ]
        });

        var 
    chart Ext.create('Ext.chart.Chart', {
            
    renderTo document.body,
            
    width    600,
            
    height   300,
            
    theme    "Blue",
            
    store    chartStore,
            
    animate  true,
            
    axes: [
                {
                    
    type     'Numeric',
                    
    position 'left',
                    
    fields   : ['count'],
                    
    minimum  0,
                    
    label    : {
                        
    font '10px Arial'
                    
    }
                },
                {
                    
    type     'Numeric',
                    
    position 'bottom',
                    
    fields   : ['key'],
                    
    label    : {
                        
    font '10px Arial'
                    
    }
                }
            ],
            
    series: [
                {
                    
    type        'area',
                    
    xField      'key',
                    
    yField      'count',
                    
    showMarkers false
                
    }
            ]
        });
    }); 
    Inspecting the DOM in Chrome, I see that the top y-axis label looks like this:

    PHP Code:
    <text id="ext-sprite-1031" style="font: normal normal normal 10px/normal Arial; " zIndex="0" x="8" y="16" text="1600" fill="#444" font="10px Arial" text-anchor="start" transform="matrix(1,0,0,1,0,0)" hidden="false">
        <
    tspan x="8" dy="3.25">1600</tspan>
    </
    text
    Changing the "y" attribute from "16" to "12" manually fixes the issue - but I don't know how that fix needs to be applied within the framework. I will notify the appropriate people.
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  10. #10
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,317
    Vote Rating
    23
    arthurakay has a spectacular aura about arthurakay has a spectacular aura about arthurakay has a spectacular aura about

      0  

    Default


    Doing a bit more research, I think the issue may stem from the calculations in Ext.chart.axis.Axis() - the drawVerticalLabels() method.

    In the block:
    PHP Code:
    if (gutterY bbox.height 2) { ... } 
    This section appears to calculate the Y value for the final (top) label. I don't know if I have enough experience in the charting package to suggest a fix, but this is where I'm focused for the time being.
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar