PDA

View Full Version : Radar chart - change the axis numeric field to be custom



asulhyan
24 Jun 2013, 9:06 AM
I been be trying to customize the numeric labels - 10,20,30,40 to be shown as 10%, 20%, 30%, 40%. Is there a cleaner way to customize it ?

I have been trying with but this doesn't appears to be the right one. Thanks



onPlaceLabel: function(label, storeItem, item, i, display, animate){
console.log(v);
}



44522



var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3'],
data: [
{ 'name': 'A', 'data1': 80 },
{ 'name': 'B', 'data1': 25 },
{ 'name': 'C', 'data1': 1.5 },
{ 'name': 'D', 'data1': 80 },
{ 'name': 'E', 'data1': 0 }
]
});

{
title: 'Agency comparison on key metrics',
xtype: 'panel',
width: 450,
height: 350,
items: [
{
width: 420,
height: 300,
xtype: 'chart',
animate: true,
theme: 'Base:gradients',
store: store,
insetPadding: 40,
legend: {
position: 'right'
},
axes: [
{
type: 'Radial',
position: 'radial',
label: {
font: "10px Arial",
display : "true",
onPlaceLabel: function(label, storeItem, item, i, display, animate){
console.log(v);
}
}
}
],
series: [
{
type: 'radar',
xField: 'name',
yField: 'data1',
showInLegend: true,
showMarkers: true,
markerConfig: {
radius: 5,
size: 5
},
style: {
'stroke-width': 2,
fill: 'none'
}
}
]
}
]
}

slemmon
25 Jun 2013, 10:07 PM
The label's renderer config should allow you to do what you want I believe:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.chart.Label-cfg-label
Also, see the label > renderer example at the top of the Label's API doc.

asulhyan
26 Jun 2013, 10:23 AM
Thanks. That's what I tried earlier referring to the doc but it didn't worked for 'radial' axis. Then later in Ext.chart.axis.Radial => drawLabel() I noticed for surface.add(...) it was explicitly setting the "text". Am I missing something here ? I actually override the drawLabel then at surface.add(...) I was able to customize the text - not sure if there is a cleaner way.




drawLabel: function () {
............
...........
if (!this.labelArray) {
if (display != 'categories') {
//draw scale
for (i = 1; i <= steps; i++) {
label = surface.add({
type: 'text',
text: round(i / steps * maxValue) ,
x: centerX,
y: centerY - rho * i / steps,
'text-anchor': 'middle',
'stroke-width': 0.1,
stroke: '#333'
});
label.setAttributes({
hidden: false
}, true);
labelArray.push(label);
}

............
............

slemmon
27 Jun 2013, 12:14 PM
I think what you're doing is fine for now. It looks like the renderer not working for the radial axis is actually an open bug:
http://www.sencha.com/forum/showthread.php?218172

asulhyan
27 Jun 2013, 12:44 PM
Thanks


I think what you're doing is fine for now. It looks like the renderer not working for the radial axis is actually an open bug:
http://www.sencha.com/forum/showthread.php?218172