Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: Stackedbar chart problem

  1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    149
    Vote Rating
    2
      0  

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

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    86
      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
    149
    Vote Rating
    2
      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 User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    86
      0  

    Default

    can yhou include the data please?

  5. #5
    Sencha User
    Join Date
    Jul 2009
    Posts
    149
    Vote Rating
    2
      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 User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    86
      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 User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    86
      0  

    Default

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

  8. #8
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    86
      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
    149
    Vote Rating
    2
      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 Attached Images

  10. #10
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    86
      0  

    Default

    Lots of pretty colors!!!

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •