DEVELOPER WORKS

Hi all,
I was wondering if it is possible to add a glow effect to one of the spokes of the radar chart. Say for example if the value is 0 for that category spoke I want to make that line glow.
Is that possible and any ideas how to do it?
Thanks!
Laura

Hi Laura,
You can use the PolarDataCanvas class to draw on a radar chart. In the following example, if the value is greater than 50, a glow is applied to the stroke by drawing a white line.
<?xml version=
"1.0"?> <mx:Application xmlns:mx=
"http://www.adobe.com/2006/mxml" xmlns:ilog=
"http://www.ilog.com/2007/ilog/flex"> <mx:Script> <![CDATA[
import mx.charts.chartClasses.PolarTransform;
import mx.collections.ArrayCollection; [Bindable]
public var temperature:ArrayCollection=
new ArrayCollection([
{Month:
"January", Temperature:39
},
{Month:
"February", Temperature:39.6
},
{Month:
"March", Temperature:42.3
},
{Month:
"April", Temperature:47.3
},
{Month:
"May", Temperature:53.4
},
{Month:
"June", Temperature:59.4
},
{Month:
"July", Temperature:62.6
},
{Month:
"August", Temperature:61.9
},
{Month:
"September", Temperature:57.6
},
{Month:
"October", Temperature:50.5
},
{Month:
"November", Temperature:43.9
},
{Month:
"December", Temperature:40.6
}]);
private function drawRadialLines():
void
{ pdc.filters = [
new GlowFilter()];
for each (var o:Object in temperature)
{
if (o.Temperature > 50) pdc.lineStyle(1, 0xFFFFFF, 1); pdc.moveTo(o.Month, 0); pdc.lineTo(o.Month, 100);
}
// Workaround to fit to the radar chart pdc.dataTransform=radar.dataTransform; pdc.y=grid.y;
} ]]> </mx:Script> <mx:Panel width=
"100%" height=
"100%" title=
"Radar Line Series Example" layout=
"horizontal"> <ilog:RadarChart id=
"radar" width=
"100%" height=
"100%" dataProvider=
"{temperature}" creationComplete=
"drawRadialLines()"> <ilog:backgroundElements> <ilog:RadarGridLines id=
"grid"/> <mx:PolarDataCanvas id=
"pdc"/> </ilog:backgroundElements> <ilog:radialAxisRenderers> <mx:AxisRenderer showLine=
"false" horizontal=
"true"/> </ilog:radialAxisRenderers> <ilog:angularAxis> <ilog:AngularAxis categoryField=
"Month" displayName=
"Month" id=
"aAxis"/> </ilog:angularAxis> <ilog:radialAxis> <mx:LinearAxis baseAtZero=
"true" maximum=
"100" displayName=
"Temperature"/> </ilog:radialAxis> <ilog:series> <ilog:RadarLineSeries dataField=
"Temperature" displayName=
"Temperature"/> </ilog:series> </ilog:RadarChart> </mx:Panel> </mx:Application>
Hope this helps,
Damien

SystemAdmin
110000D4XK
‏2011-06-30T07:24:59Z
Hi Laura,
You can use the PolarDataCanvas class to draw on a radar chart. In the following example, if the value is greater than 50, a glow is applied to the stroke by drawing a white line.
<pre class="jive-pre">
<?xml version=
"1.0"?> <mx:Application xmlns:mx=
"http://www.adobe.com/2006/mxml" xmlns:ilog=
"http://www.ilog.com/2007/ilog/flex"> <mx:Script> <![CDATA[
import mx.charts.chartClasses.PolarTransform;
import mx.collections.ArrayCollection; [Bindable]
public var temperature:ArrayCollection=
new ArrayCollection([
{Month:
"January", Temperature:39
},
{Month:
"February", Temperature:39.6
},
{Month:
"March", Temperature:42.3
},
{Month:
"April", Temperature:47.3
},
{Month:
"May", Temperature:53.4
},
{Month:
"June", Temperature:59.4
},
{Month:
"July", Temperature:62.6
},
{Month:
"August", Temperature:61.9
},
{Month:
"September", Temperature:57.6
},
{Month:
"October", Temperature:50.5
},
{Month:
"November", Temperature:43.9
},
{Month:
"December", Temperature:40.6
}]);
private function drawRadialLines():
void
{ pdc.filters = [
new GlowFilter()];
for each (var o:Object in temperature)
{
if (o.Temperature > 50) pdc.lineStyle(1, 0xFFFFFF, 1); pdc.moveTo(o.Month, 0); pdc.lineTo(o.Month, 100);
}
// Workaround to fit to the radar chart pdc.dataTransform=radar.dataTransform; pdc.y=grid.y;
} ]]> </mx:Script> <mx:Panel width=
"100%" height=
"100%" title=
"Radar Line Series Example" layout=
"horizontal"> <ilog:RadarChart id=
"radar" width=
"100%" height=
"100%" dataProvider=
"{temperature}" creationComplete=
"drawRadialLines()"> <ilog:backgroundElements> <ilog:RadarGridLines id=
"grid"/> <mx:PolarDataCanvas id=
"pdc"/> </ilog:backgroundElements> <ilog:radialAxisRenderers> <mx:AxisRenderer showLine=
"false" horizontal=
"true"/> </ilog:radialAxisRenderers> <ilog:angularAxis> <ilog:AngularAxis categoryField=
"Month" displayName=
"Month" id=
"aAxis"/> </ilog:angularAxis> <ilog:radialAxis> <mx:LinearAxis baseAtZero=
"true" maximum=
"100" displayName=
"Temperature"/> </ilog:radialAxis> <ilog:series> <ilog:RadarLineSeries dataField=
"Temperature" displayName=
"Temperature"/> </ilog:series> </ilog:RadarChart> </mx:Panel> </mx:Application>
</pre>
Hope this helps,
Damien
More...
Thanks Damien!
I just added an else statement to make the stroke invisible if it wasn't over 50 because there was carry over of the stroke into the November and December lines which did not have values over 50. I was getting a result like that seen in the attached picture.
This fixed it though
if (o.Temperature > 50) {
pdc.lineStyle(1, 0xFFFFFF, 1);
}
else {
pdc.lineStyle(0,0xFFFFFF, 0);
}