Stackedbar chart problem

[silve69]

Hello friends,

I have several days and some posts looking an answer for my issue, but nothing yet...
Also I was looking for in YUI Docs without success.
I have a stackedbar chart with decimal values in the xAxis I don't know why, because the received JSON only included integer numbers.
Please, see the attached image.
Somebody are using this chart with the same issue??

Best regards,
Silver

[jay@moduscreate.com]

Can you post your code? I think this an excellent opportunity for me to assist.

I've seen similar issues when working on the following Ext JS in Action Example.

[silve69]

Hello my friend,

Here is the code:

storeTestStatus = new Ext.data.JsonStore({ 
     fields: ['id', 'iso', 'name', {name:'pending', type:'int'}, {name:'abandon',type:'int'}, {name:'complete',type:'int'}]
});

chartTestStatus = function(){
     chartTestStatus.superclass.constructor.call(this, {
          height:390,
          layout:'fit',
          items: {
               xtype: 'stackedbarchart',
               store: storeTestStatus,
               url:'/themes/default/swf/charts.swf',
               yField: 'iso',
               xAxis: new Ext.chart.NumericAxis({
                    labelRenderer: Ext.util.Format.numberRenderer('0'),
	            stackingEnabled: true
               }),
               tipRenderer : function(chart, record, index, series){
                    if(series.xField == 'pending'){
                         return record.data.name + '\n'+Ext.util.Format.number(record.data.pending, '0') + ' Pendientes';
                    }else if(series.xField == 'abandon'){
                         return record.data.name + '\n'+Ext.util.Format.number(record.data.abandon, '0') + ' Abandonados';
                    } else {
		         return record.data.name + '\n'+Ext.util.Format.number(record.data.complete, '0') + ' Completados';
                    }
               },
               series: [{
                    xField: 'pending',
                    displayName: 'Pendientes',
                    style: {color:0x5C73FE, length:25}
               },{
                    xField: 'abandon',
                    displayName: 'Abandonados',
                    style: {color:0xFF002A}
               },{
                    xField: 'complete',
                    displayName: 'Completados',
                    style: {color:0x029C02}
               }]
          }
     });
}
Ext.extend(chartTestStatus, Ext.Panel);

Thanks in advanced!!!
Silver

[jay@moduscreate.com]

can yhou include the data please?

[silve69]

I'm populating 5 charts from only one AJAX request... in the on.load event of the first chart I have the loadData por each additional store.

The data received for this chart is:

{"test_status":[{"id":"1","iso":"LUSCHER","name":"Colores de Max L\u00fcscher","pending":"6","abandon":"1","complete":"1"},{"id":"2","iso":"16PF","name":"16 Factores de la Personalidad","pending":"3","abandon":"3","complete":"2"},{"id":"3","iso":"IPV","name":"Inventario de la Personalidad del Vendedor","pending":"5","abandon":"2","complete":"0"},{"id":"4","iso":"MMPI-2","name":"Inventario Multif\u00e1sico de la Personalidad","pending":"7","abandon":"1","complete":"0"},{"id":"5","iso":"CLEAVER","name":"Test de Cleaver","pending":"3","abandon":"1","complete":"0"},{"id":"6","iso":"MOSS","name":"Test de Moss","pending":"0","abandon":"0","complete":"2"},{"id":"7","iso":"ALLPORT","name":"Test de Valores AllPort","pending":"2","abandon":"0","complete":"1"},{"id":"8","iso":"TERMAN","name":"Test de Terman","pending":"4","abandon":"0","complete":"0"},{"id":"9","iso":"RAVEN","name":"Test de Raven","pending":"0","abandon":"0","complete":"2"},{"id":"10","iso":"DOMINOS","name":"Test Domin\u00f3s","pending":"2","abandon":"2","complete":"0"},{"id":"11","iso":"TCG","name":"Test de Cultura General","pending":"3","abandon":"0","complete":"0"},{"id":"12","iso":"INGLES","name":"Test de Ingl\u00e9s","pending":"2","abandon":"0","complete":"1"},{"id":"13","iso":"COMPUTAC","name":"Test de Computaci\u00f3n","pending":"4","abandon":"0","complete":"1"}]}

Regards,
Silver

[jay@moduscreate.com]

BTW, i'm testing this now. To be honest, I don't have a clue why you're creating a class with a static instance of JsonStore attached.

[jay@moduscreate.com]

Furthermore, you don't need to set the xtype property when you're creating a pre-configured class.

[jay@moduscreate.com]

Adding the NumericAxis is throwing you off.

Paste this on any vanilla Ext JS 3.0 page:

Ext.onReady(function() {

    var data =  {"test_status":[{"id":"1","iso":"LUSCHER","name":"Colores de Max L\u00fcscher","pending":"6","abandon":"1","complete":"1"},{"id":"2","iso":"16PF","name":"16 Factores de la Personalidad","pending":"3","abandon":"3","complete":"2"},{"id":"3","iso":"IPV","name":"Inventario de la Personalidad del Vendedor","pending":"5","abandon":"2","complete":"0"},{"id":"4","iso":"MMPI-2","name":"Inventario Multif\u00e1sico de la Personalidad","pending":"7","abandon":"1","complete":"0"},{"id":"5","iso":"CLEAVER","name":"Test de Cleaver","pending":"3","abandon":"1","complete":"0"},{"id":"6","iso":"MOSS","name":"Test de Moss","pending":"0","abandon":"0","complete":"2"},{"id":"7","iso":"ALLPORT","name":"Test de Valores AllPort","pending":"2","abandon":"0","complete":"1"},{"id":"8","iso":"TERMAN","name":"Test de Terman","pending":"4","abandon":"0","complete":"0"},{"id":"9","iso":"RAVEN","name":"Test de Raven","pending":"0","abandon":"0","complete":"2"},{"id":"10","iso":"DOMINOS","name":"Test Domin\u00f3s","pending":"2","abandon":"2","complete":"0"},{"id":"11","iso":"TCG","name":"Test de Cultura General","pending":"3","abandon":"0","complete":"0"},{"id":"12","iso":"INGLES","name":"Test de Ingl\u00e9s","pending":"2","abandon":"0","complete":"1"},{"id":"13","iso":"COMPUTAC","name":"Test de Computaci\u00f3n","pending":"4","abandon":"0","complete":"1"}]};
    var storeTestStatus = new Ext.data.JsonStore({
       data : data,
        autloLoad : true,
      root : 'test_status',
      fields: ['id', 'iso', 'name', {name:'pending', type:'int'}, {name:'abandon',type:'int'}, {name:'complete',type:'int'}]
    });
    var chart = {
           xtype: 'stackedbarchart',
           store: storeTestStatus,
           yField: 'iso',
       
           tipRenderer : function(chart, record, index, series){
                if(series.xField == 'pending'){
                     return record.data.name + '\n'+Ext.util.Format.number(record.data.pending, '0') + ' Pendientes';
                }else if(series.xField == 'abandon'){
                     return record.data.name + '\n'+Ext.util.Format.number(record.data.abandon, '0') + ' Abandonados';
                } else {
             return record.data.name + '\n'+Ext.util.Format.number(record.data.complete, '0') + ' Completados';
                }
           },
           series: [{
                xField: 'pending',
                displayName: 'Pendientes',
                style: {color:0x5C73FE, length:25}
           },{
                xField: 'abandon',
                displayName: 'Abandonados',
                style: {color:0xFF002A}
           },{
                xField: 'complete',
                displayName: 'Completados',
                style: {color:0x029C02}
           }]
      };


    new Ext.Window({
        height : 400,
        width  : 400,
        layout : 'fit',
        items  : chart

    }).show();
})

[silve69]

That's work!!!
I only removed the xAxis declaration... now my charts section look like the attached image.

Thank you very much!

[jay@moduscreate.com]

Lots of pretty colors!!!