Results 1 to 3 of 3

Thread: Extending Graph

  1. #1
    Sencha User bkraut's Avatar
    Join Date
    Nov 2007
    Location
    Maribor, Slovenia
    Posts
    403
    Vote Rating
    1
      0  

    Default Extending Graph

    Hi,

    I tried to extend a graph to form a reusable component, but no success. I allways get an error - too much recursion.

    Here is my class:

    PHP Code:
    Ext.namespace("Ext.ux");

    Ext.ux.IterationBurnDownChart Ext.extend(Ext.Panel, {
        
        
    // ***********************************************************************************
        // ***********************************************************************************
        // Init component
        // ***********************************************************************************
        // ***********************************************************************************

        
    initComponent: function() {
            
            var 
    store = new Ext.data.JsonStore({
                
    fields:['name''idealBurnDown''completedTasks''remainingTasks''remainingEffort'],
                
    data: [
                    {
    name:'Jul 07'completedTasks245idealBurnDown300remainingTasks400remainingEffort250},
                    {
    name:'Jul 08'completedTasks240idealBurnDown350remainingTasks450remainingEffort290},
                    {
    name:'Jul 09'completedTasks355idealBurnDown400remainingTasks500remainingEffort300},
                    {
    name:'Jul 10'completedTasks375idealBurnDown420remainingTasks540remainingEffort430},
                    {
    name:'Jul 11'completedTasks490idealBurnDown450remainingTasks540remainingEffort420},
                    {
    name:'Jul 12'completedTasks495idealBurnDown580remainingTasks600remainingEffort540},
                    {
    name:'Jul 13'completedTasks520idealBurnDown600remainingTasks720remainingEffort620},
                    {
    name:'Jul 14'completedTasks620idealBurnDown750remainingTasks800remainingEffort720}
                ]
            });
            
            
    Ext.apply(this, {
                
    iconCls:'chart',
                
    title'Burndown Chart',
                
    collapsibletrue,
                
    width460,
                
    height320,
                
    frame:true,
                
    items: {
                    
    xtype'columnchart',
                    
    storestore,
                    
    url:'../lib/ext/resources/charts.swf',
                    
    xField'name',
                    
    yAxis: new Ext.chart.NumericAxis({
                        
    displayName'Visits',
                        
    labelRenderer Ext.util.Format.numberRenderer('0,0')
                    }),
                    
    tipRenderer : function(chartrecordindexseries){
                        if(
    series.yField == 'visits'){
                            return 
    Ext.util.Format.number(record.data.visits'0,0') + ' visits in ' record.data.name;
                        }else{
                            return 
    Ext.util.Format.number(record.data.views'0,0') + ' page views in ' record.data.name;
                        }
                    },
                    
    chartStyle: {
                        
    animationEnabledtrue,
                        
    font: {
                            
    name'Tahoma',
                            
    color0x444444,
                            
    size11
                        
    },
                        
    dataTip: {
                            
    padding5,
                            
    border: {
                                
    color0x99bbe8,
                                
    size:1
                            
    },
                            
    background: {
                                
    color0xDAE7F6,
                                
    alpha.9
                            
    },
                            
    font: {
                                
    name'Tahoma',
                                
    color0x15428B,
                                
    size10,
                                
    boldtrue
                            
    }
                        },
                        
    xAxis: {
                            
    color0x69aBc8,
                            
    majorTicks: {color0x69aBc8length4},
                            
    minorTicks: {color0x69aBc8length2},
                            
    majorGridLines: {size1color0xeeeeee}
                        },
                        
    yAxis: {
                            
    color0x69aBc8,
                            
    majorTicks: {color0x69aBc8length4},
                            
    minorTicks: {color0x69aBc8length2},
                            
    majorGridLines: {size1color0xdfe8f6}
                        }
                    },
                    
    series: [{
                        
    type'column',
                        
    displayName'Completed tasks',
                        
    yField'completedTasks',
                        
    style: {
                            
    image:'bar.gif',
                            
    mode'stretch',
                            
    color:0xf9993c
                        
    }
                    },{
                        
    type:'line',
                        
    displayName'Remaining effort',
                        
    yField'remainingEffort',
                        
    style: {
                            
    color0x12217c
                        
    }
                    },{
                        
    type:'line',
                        
    displayName'Ideal burndown',
                        
    yField'idealBurnDown',
                        
    style: {
                            
    color0x1b8027
                        
    }
                    },{
                        
    type:'line',
                        
    displayName'Remaining tasks',
                        
    yField'remainingTasks',
                        
    style: {
                            
    color0x6a7fff
                        
    }
                    }]
                }
            });
            
    Ext.ux.IterationBurnDownChart.superclass.constructor.call(thisarguments);
        }

    });

    //***********************************************************************************
    //***********************************************************************************
    //Registering xtype
    //***********************************************************************************
    //***********************************************************************************

    Ext.reg('IterationBurnDownChart'Ext.ux.IterationBurnDownChart); 

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Vote Rating
    394
      0  

    Default

    You're calling the superclass's constructor from your initComponent, you should be calling the superclass's initComponent.

  3. #3
    Sencha User bkraut's Avatar
    Join Date
    Nov 2007
    Location
    Maribor, Slovenia
    Posts
    403
    Vote Rating
    1
      0  

    Default

    Of course. After hours of work ... Thanks.

Posting Permissions

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