1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    61
    Vote Rating
    2
    cahello is on a distinguished road

      0  

    Default Unanswered: Dynamic rendering of the steps or 'concentric circles' in radar chart

    Unanswered: Dynamic rendering of the steps or 'concentric circles' in radar chart


    Hi,

    I have to render a radar chart based on data returned by a rest call. I know that the following code renders the required number of 'steps'/'concentric circles' according to the 'maximum' and 'steps' assigned:

    Code:
    Ext.define('Override.chart.axis.Radial', {
            override: 'Ext.chart.axis.Radial',
    
    
    
    
            drawLabel: function() {
                var me = this,
                    maxValue = me.maximum || 0,
                    steps = me.steps;
              
    
    
                me.callParent(arguments);
                
                if(me.labelArray && me.label.display != 'categories'){
                    for (var i = 0; i < steps; i++) {
                        me.labelArray[i].setAttributes({
                            text: (i+1) / steps * maxValue
                        }, true);
                    }
                }
            }
        });
    However, I dont know the 'maximum' value or the 'steps' before the data is returned. By that time, the store is already created and I am unable to set those two values. The following is the data model:

    Code:
    Ext.define('User', { 
    		extend: 'Ext.data.Model',
    		fields: [{name: 'interval',}, {name: 'data1',
                                  convert : function (value){
    					if(value>=10)
    						flag=0;
    					else
    						setflagdata1(1);
    				}
    			}, 
    			{name: 'data2',
                                  convert : function (value){
    					if(value>=10)
    						flag=0;
    					else
    						setflagdata2(1);
    				}
    
    			},{name: 'data3',
                               convert : function (value){
    					if(value>=10)
    						flag=0;
    					else
    						setflagdata3(1);
    				}
    			}]
    	});
    The 3 functions setflagdata3, setfalgdata2 and setfalgdata1 check if the maximum value is less than 10. If it is, I have to set the 'maximum' and 'steps' accordingly else I dont do anything and let the chart display normally.
    The following is my store:

    Code:
    var radarchart = Ext.create('Ext.data.Store', {
    		storeId: 'radarchart',
    		model: 'User',
    		proxy: {
    			type: 'ajax',
    			url: 'chart-portlet/jason/example.json', 
    			reader: {
    				type: 'json',
    				root: 'data'
    			}
    		},
    		autoLoad: true,
    
    
    		listeners : {
    			load : function(store) {
    
                                    //code displaying the chart and this is also where the two variables 'maximum' and 'steps' are set.
    
    
    }
    }
    });
    When I try checking for the maximum value returned in the data model, all I get is a radar chart with no data displayed and all the axes labelled as 'NAN'. How do I dynamically set the two variables 'maximum' and steps' after the data is received? I want to override the 'drawlabel' function only if the 'maximum' value returned is less than 10.

  2. #2
    Sencha User
    Join Date
    May 2012
    Posts
    61
    Vote Rating
    2
    cahello is on a distinguished road

      0  

    Default


    I have attached the chart rendered.
    Attached Images