4.1.1RC2 Gauge Chart Step Labels Broken

**Dmoney** · 17 Jun 2012 2:21 PM

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

**scottmartin** · 18 Jun 2012 7:21 AM

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

**Dmoney** · 18 Jun 2012 8:26 AM

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

**scottmartin** · 18 Jun 2012 8:43 AM

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.

**Dmoney** · 18 Jun 2012 8:48 AM

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']
            }]
                    
        });

**scottmartin** · 18 Jun 2012 8:52 AM

If you turn off animation, does this help?

Scott.

**Dmoney** · 18 Jun 2012 9:00 AM

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

**scottmartin** · 18 Jun 2012 9:43 AM

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.

4.1.1RC2 Gauge Chart Step Labels Broken

Thread Tools

Search Thread

Display

4.1.1RC2 Gauge Chart Step Labels Broken

4.1.1RC2 Gauge Chart Step Labels Broken