1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    135
    Vote Rating
    1
    silve69 is on a distinguished road

      0  

    Default Stackedbar chart problem

    Stackedbar chart problem


    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
    Attached Images

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    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.


  3. #3
    Sencha User
    Join Date
    Jul 2009
    Posts
    135
    Vote Rating
    1
    silve69 is on a distinguished road

      0  

    Default


    Hello my friend,

    Here is the code:

    HTML 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

  4. #4
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    can yhou include the data please?

  5. #5
    Sencha User
    Join Date
    Jul 2009
    Posts
    135
    Vote Rating
    1
    silve69 is on a distinguished road

      0  

    Default


    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:

    HTML Code:
    {"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

  6. #6
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    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.

  7. #7
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


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

  8. #8
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Adding the NumericAxis is throwing you off.

    Paste this on any vanilla Ext JS 3.0 page:

    Code:
    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();
    })

  9. #9
    Sencha User
    Join Date
    Jul 2009
    Posts
    135
    Vote Rating
    1
    silve69 is on a distinguished road

      0  

    Default


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

    Thank you very much!
    Attached Images

  10. #10
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Lots of pretty colors!!!