Hybrid View

  1. #1
    Sencha User
    Join Date
    Feb 2009
    Posts
    107
    Vote Rating
    0
    marman is on a distinguished road

      0  

    Default Stacked Bar Chart help

    Stacked Bar Chart help


    I am having two issues with my stacked bar chart and was hoping someone could help point out where i am going wrong.
    1. The scale of the chart is several orders of magnitude off. The dataset is the same as what i have in my grid below the chart
    2. How can i make the legend display "friendly" labels, like: "No Join Data" rather than the field from my dataset: noJoinData

    Code:
    	var myPageSize = 7; // server script should only send back 25 items at a time
    
        //--create the data store
        var myStore = new Ext.data.Store({
            model: 'CipSummary'
    		,pageSize: myPageSize
        });
        
        
        var panel1 = Ext.create('widget.panel', {
            width: 700,
            height: 350,
            title: 'Last 7 Days',
            renderTo: 'cipSummary-chart',
            layout: 'fit',
            items: {
                xtype: 'chart',
                animate: true,
                shadow: true,
                store: myStore,
                legend: {
                    position: 'right'
                },
                axes: [{
                    type: 'Numeric',
                    position: 'bottom',
                    //fields: ['numNoJoinData', 'numNoUpdatedData', 'numUnexpectedError','numNullResponse' ,'numSent' ,'numFailed' ,'numNullMsgResult' ,'numNoCipFound'],
    				fields: ['numNoJoinData', 'numNoUpdatedData', 'numUnexpectedError','numNullResponse', 'numSent', 'numFailed','numNullMsgResult'],
                    title: false,
                    grid: true,
                    label: { renderer: Ext.util.Format.numberRenderer('0,0') },
                }, {
                    type: 'Category',
                    position: 'left',
                    fields: ['dayId'],
                    title: false
                }],
                series: [{
                    type: 'bar',
                    axis: 'bottom',
                    gutter: 80,
                    xField: 'dayId', 
                    yField: ['numNoJoinData', 'numNoUpdatedData', 'numUnexpectedError','numNullResponse', 'numSent', 'numFailed','numNullMsgResult'],
                    stacked: true,
                    tips: {
                        trackMouse: true,
                        width: 65,
                        height: 28,
                        renderer: function(storeItem, item){
                            //this.setTitle( String(item.value[1]) );
                        }
                    }
                }]
            }
        });
        
        
        //--manually load local data
        myStore.loadPage(1);
    Attached Images

  2. #2
    Sencha User
    Join Date
    Mar 2008
    Posts
    5
    Vote Rating
    0
    robertvonk is on a distinguished road

      0  

    Default


    Did you manage to customize the text displayed in the legend? I'm searching for this also

  3. #3
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    7
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    Sending our charting gurus this way for some help
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  4. #4
    Sencha User
    Join Date
    Nov 2010
    Posts
    168
    Vote Rating
    0
    philogb is on a distinguished road

      0  

    Default


    Hi,

    Thanks for the report. Could you provide us with the exact json/store data you're using to create the chart? I'm trying to reproduce the example and for now I will try to use something that matches what's shown in the grid, but I would really appreciate if you could give me the exact dataset for the example.

    Thanks!

  5. #5
    Sencha User
    Join Date
    Nov 2010
    Posts
    168
    Vote Rating
    0
    philogb is on a distinguished road

      0  

    Default


    The axes are working for me. I'm not sure if this is because I'm working on a newer build or because the data from the example is different. Could you try this use-case and tell me whether it works for you too?

    The complete code of the example is:

    PHP Code:
    Ext.require('Ext.chart.*');
    Ext.require('Ext.data.*');
    Ext.require('Ext.layout.container.Fit');

    Ext.onReady(function() {

      var 
    model = [{
        
    "numNoJoinData"216,
        
    "numNoUpdatedData"0
        
    "numUnexpectedError"0,
        
    "numNullResponse"0
        
    "numSent"0
        
    "numFailed"0,
        
    "numNullMsgResult"0,
        
    "dayId"20110310
      
    }, {
        
    "numNoJoinData"1656,
        
    "numNoUpdatedData"0
        
    "numUnexpectedError"0,
        
    "numNullResponse"0
        
    "numSent"0
        
    "numFailed"0,
        
    "numNullMsgResult"0,
        
    "dayId"20110311
      
    }];

      
    //--create the data store
      
    var myStore = new Ext.data.Store({
        
    fields: ['numNoJoinData''numNoUpdatedData''numUnexpectedError','numNullResponse''numSent''numFailed','numNullMsgResult']
      });

      
    myStore.loadData(model);


      var 
    panel1 Ext.create('widget.panel', {
        
    width700,
        
    height350,
        
    title'Last 7 Days',
        
    renderToExt.getBody(),
        
    layout'fit',
        
    items: {
          
    xtype'chart',
          
    animatetrue,
          
    shadowtrue,
          
    storemyStore,
          
    legend: {
            
    position'right'
          
    },
          
    axes: [{
            
    type'Numeric',
            
    position'bottom',
            
    fields: ['numNoJoinData''numNoUpdatedData''numUnexpectedError','numNullResponse''numSent''numFailed','numNullMsgResult'],
            
    titlefalse,
            
    gridtrue,
            
    label: { 
              
    rendererExt.util.Format.numberRenderer('0,0'
            },
          }, {
            
    type'Category',
            
    position'left',
            
    fields: ['dayId'],
            
    titlefalse
          
    }],
          
    series: [{
            
    type'bar',
            
    axis'bottom',
            
    gutter80,
            
    xField'dayId'
            
    yField: ['numNoJoinData''numNoUpdatedData''numUnexpectedError','numNullResponse''numSent''numFailed','numNullMsgResult'],
            
    stackedtrue,
            
    tips: {
              
    trackMousetrue,
              
    width65,
              
    height28,
              
    renderer: function(storeItemitem){
                
    //this.setTitle( String(item.value[1]) );
              
    }
            }
          }]
        }
      });
    }); 
    I hope this helps,
    Attached Images

  6. #6
    Sencha User
    Join Date
    Nov 2010
    Posts
    168
    Vote Rating
    0
    philogb is on a distinguished road

      0  

    Default


    You can also use set human readable names in the legend by using the title property in the series configuration object:

    PHP Code:
          series: [{
            
    type'bar',
            
    axis'bottom',
            
    gutter80,
            
    xField'dayId'
            
    yField: ['numNoJoinData''numNoUpdatedData''numUnexpectedError','numNullResponse''numSent''numFailed','numNullMsgResult'],
            
    title: ['No Join Data''No Updates''Unexpected Errors','Null Response''Sent''Failed','Null MsgResult'],
            
    stackedtrue,
            
    tips: {
              
    trackMousetrue,
              
    width65,
              
    height28,
              
    renderer: function(storeItemitem){
                
    //this.setTitle( String(item.value[1]) );
              
    }
            }
          }] 
    I hope this helps,
    Attached Images

Similar Threads

  1. Stacked Column Chart in Ext JS
    By extDev in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 7 Jan 2011, 2:30 PM
  2. Location of Keys in stacked bar chart
    By lalit_lmc in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 3 Dec 2010, 3:59 AM
  3. Stacked bar chart layout
    By Jba in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 26 May 2010, 2:12 AM
  4. ChartListener for Stacked bar chart
    By kamisama in forum Ext GWT: Discussion
    Replies: 7
    Last Post: 4 Feb 2010, 12:39 PM
  5. Stacked Bar Chart Bar Width/Thickness
    By mathec in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 16 Oct 2009, 10:56 AM

Thread Participants: 4

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar