PDA

View Full Version : Dynamic rendering of the steps or 'concentric circles' in radar chart



cahello
1 Nov 2012, 8:13 AM
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:


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:


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:


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.

cahello
1 Nov 2012, 8:19 AM
I have attached the chart rendered.