PDA

View Full Version : Radar chart repeats value on the concentric circles when the max value<10



cahello
19 Oct 2012, 8:02 AM
Hi,

I am facing 2 problems with radar chart:

1. When I want to display data, such that the maximum data value is less than 10, the values are repeated on the concentric circles. How do I manipulate this so that 2 concentric circles don't show the same value? I believe this is an error. I have tried 'steps' and 'maximum' but this still changes nothing. I have attached a file with this post for better explanation - as can be seen 1,4 and 6 are repeated. How to avoid this repetition?

2. Is there a way to start the value with 0, instead of 1?

Thanks

cahello
19 Oct 2012, 8:40 AM
I saw that the variable 'steps' is set to 10 by default in this thread:
http://www.sencha.com/forum/showthread.php?238139-Problems-with-Radar-Chart-when-data-is-JSON

(http://www.sencha.com/forum/showthread.php?238139-Problems-with-Radar-Chart-when-data-is-JSON)How can I change this value?

vietits
20 Oct 2012, 4:37 PM
See related posts here:
- http://www.sencha.com/forum/showthread.php?244676-How-to-display-data-returned-by-the-server-in-a-radar-chart/page2 (post #15)
- http://www.sencha.com/forum/showthread.php?244353-Trying-to-change-the-pulse-size-on-a-radar-chart

(http://www.sencha.com/forum/showthread.php?244353-Trying-to-change-the-pulse-size-on-a-radar-chart)

cahello
23 Oct 2012, 10:58 AM
Thank you for the answer. That resolved my first doubt. However, when I try to start with '0', the mapping is not done correctly. I use the following 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) / steps * maxValue
}, true);
}
}
}
});


For the axes, the code is:


axes: [{
type: 'Radial',
position: 'radial',
label: {
display: true
},
minimum: 1,
maximum: 5,
steps: 10
}],


This displays '0' as the starting point alright but the mapping wrong. How do I resolve this error?

Thanks.....

cahello
23 Oct 2012, 11:20 AM
This is the test code:


/*global Ext:false */
Ext.onReady(function () {
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3'],
data: [{
'name': 'metric one',
'data1': 1,
'data2': 0,
'data3': 0
}, {
'name': 'metric two',
'data1': 0,
'data2': 5,
'data3': 3
}, {
'name': 'metric three',
'data1': 2,
'data2': 0,
'data3': 4
}, {
'name': 'metric four',
'data1': 0,
'data2': 0,
'data3': 0
}, {
'name': 'metric five',
'data1': 0,
'data2': 3,
'data3': 1
}]
});

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);
}
}
}
});


Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
theme: 'Category2',
store: store,
axes: [{
type: 'Radial',
position: 'radial',
label: {
display: true
},
minimum: 1,
maximum: 5,
steps: 5
}],
series: [{
type: 'radar',
xField: 'name',
yField: 'data1',
showInLegend: true,
showMarkers: true,

style: {
'stroke-width': 2,
// fill: 'none'
opacity: 0.4
}
}, {
type: 'radar',
xField: 'name',
yField: 'data2',
showMarkers: true,
showInLegend: true,

style: {
'stroke-width': 2,
// fill: 'none'
opacity: 0.4
}
}, {
type: 'radar',
xField: 'name',
yField: 'data3',
showMarkers: true,
showInLegend: true,

style: {
'stroke-width': 2,
// fill: 'none'
opacity:0.4
}
}]
});
});




My question is how do I get the plotting to start from '0'? Even if the 'text' is '0', the values are plotted as though the value was 1 to 5.