1. #1
    Sencha User
    Join Date
    May 2010
    Posts
    172
    Vote Rating
    1
    Dmoney is on a distinguished road

      0  

    Default 4.1.1RC2 Gauge Chart Step Labels Broken

    4.1.1RC2 Gauge Chart Step Labels Broken


    The Gauge Chart Step Labels don't display properly and if you resize the chart the labels appear all over the place and multiply.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Can you provide a screenshot of this? I cannot duplicate using:
    http://dev.sencha.com/deploy/ext-4.1...rts/Gauge.html

    Please specify the exact version of extjs4 that you are using ex:4.1.1rc2?
    Does this happen in all browsers?

    Regards,
    Scott

  3. #3
    Sencha User
    Join Date
    May 2010
    Posts
    172
    Vote Rating
    1
    Dmoney is on a distinguished road

      0  

    Default


    Hi Scott,

    yes the problem is with 4.1.1 RC2 and I just checked and it appears to only happen with firefox I don't know about i.e. but I checked chrome and safari and they displayed correctly.

    Screen Shot 2012-06-18 at 10.27.41 AM.png

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    I tried this in FF 13 and it did not display this problem. Can you provide a quick example that displays this problem? Does this happen when you resize the window on the example I listed above?

    Scott.

  5. #5
    Sencha User
    Join Date
    May 2010
    Posts
    172
    Vote Rating
    1
    Dmoney is on a distinguished road

      0  

    Default


    yes that screen print is after a resize but even on the first load there are extra ticks floating around without labels.

    Code:
    
    
    
    Ext.define('AM.view.chart.14dayRev' ,{
        extend: 'Ext.chart.Chart',
    
    
        alias : 'widget.14dayRev',
           style: 'background:#fff',
    
    
          animate: {
                   // easing: 'elasticIn',
                    duration: 300
                },
                
                insetPadding: 30,
             
               
                 axes: [{
                    type: 'gauge',
                    position: 'gauge',
                    minimum: 0,
                    maximum: 8,
                    steps: 8,
                    margin: 5
                }],series: [{
                    type: 'gauge',
                     field: 'dayTotal',
                    donut: 40,
                   colorSet: ['#384F67', '#ddd']
                }]
                        
            });

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    If you turn off animation, does this help?

    Scott.

  7. #7
    Sencha User
    Join Date
    May 2010
    Posts
    172
    Vote Rating
    1
    Dmoney is on a distinguished road

      0  

    Default


    no it still happens without the animate.

    here is a screen print before resize as well

    Screen Shot 2012-06-18 at 10.57.48 AM.png

  8. #8
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    This works for me with no issues:

    // change path to your EXT if using
    Code:
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>f222392</title>
    
        <link rel="stylesheet" type="text/css" href="../../extjs41rc2/resources/css/ext-all.css"/>
        <link rel="stylesheet" type="text/css" href="../../extjs41rc2/examples/shared/example.css" />
    
        <script type="text/javascript" src="../../extjs41rc2/ext-all-debug.js"></script>
        <script type="text/javascript" src="../../extjs41rc2/examples/example-data.js"></script>
    
    	<script type="text/javascript">
    		document.write('ExtJS: '+Ext.versions.extjs.version);
    	</script>
    
        <!-- page specific -->
        <script type="text/javascript" src="example.js"></script>
    </head>
    <body>
        <h1>f222392</h1>
        <div id="sencha-div" style="padding:30px;"></div>
    </body>
    </html>
    Code:
    Ext.require(['Ext.chart.*', 'Ext.chart.axis.Gauge', 'Ext.chart.series.*', 'Ext.Window']);
    
    Ext.onReady(function () {
    
        Ext.create('Ext.Window', {
            width: 400,
            height: 300,
            title: 'Gauge Charts',
            tbar: [{
                text: 'Reload Data',
                handler: function() {
                    store3.loadData(generateData(1));
                }
            }],
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            items: [
            {
                xtype: 'chart',
                style: 'background:#fff',
                animate: {
                    //true,
                    duration: 30
                },    
                store: store3,
                insetPadding: 25,
                flex: 1,
                axes: [{
                    type: 'gauge',
                    position: 'gauge',
                    minimum: 0,
                    maximum: 100,
                    steps: 10,
                    margin: 7
                }],
                series: [{
                    type: 'gauge',
                    field: 'data1',
                    donut: 30,
                    colorSet: ['#82B525', '#ddd']
                }]
            }]
        }).show();
        
    });
    Scott.

Thread Participants: 1