DEVELOPER WORKS

[peeps147 said:]
Is it possible to have the radial lines on a radar chart be different colors from one another and dependent upon the value that they are displaying? So for example, if the value is above 5 the radial line would be red but below 5 the radial line would be green? Any help would be appreciated...thanks!!

[dmandrioli said:]
Hi,
Radial grid lines are drawn by the RadarGridLines class according to the radialStroke style property.
As a workaround, you can use the PolarDataCanvas; the following sample shows how to draw radial lines in data coordinates system.
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"<br /> xmlns:ilog="http://www.ilog.com/2007/ilog/flex">
<mx:Script>
<![CDATA[<br /> 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
{
for each (var o:Object in temperature)
{
if (o.Temperature > 50)
pdc.lineStyle(1, 0xFF0000, 0.4);
else
pdc.lineStyle(1, 0x00FF00, 0.4);
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%"<br /> height="100%"
title="Radar Line Series Example"
layout="horizontal">
<ilog:RadarChart id="radar"<br /> 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"<br /> horizontal="true"/>
</ilog:radialAxisRenderers>
<ilog:angularAxis>
<ilog:AngularAxis categoryField="Month"<br /> displayName="Month"
id="aAxis"/>
</ilog:angularAxis>
<ilog:radialAxis>
<mx:LinearAxis baseAtZero="true" maximum="100"<br /> displayName="Temperature"/>
</ilog:radialAxis>
<ilog:series>
<ilog:RadarLineSeries dataField="Temperature"<br /> displayName="Temperature"/>
</ilog:series>
</ilog:RadarChart>
<mx:Legend dataProvider="{radar}"/>
</mx:Panel>
</mx:Application>
Hope this helps,

SystemAdmin
110000D4XK
‏2009-02-26T17:52:50Z
[dmandrioli said:]
Hi,
Radial grid lines are drawn by the RadarGridLines class according to the radialStroke style property.
As a workaround, you can use the PolarDataCanvas; the following sample shows how to draw radial lines in data coordinates system.
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"<br /> xmlns:ilog="http://www.ilog.com/2007/ilog/flex">
<mx:Script>
<![CDATA[<br /> 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
{
for each (var o:Object in temperature)
{
if (o.Temperature > 50)
pdc.lineStyle(1, 0xFF0000, 0.4);
else
pdc.lineStyle(1, 0x00FF00, 0.4);
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%"<br /> height="100%"
title="Radar Line Series Example"
layout="horizontal">
<ilog:RadarChart id="radar"<br /> 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"<br /> horizontal="true"/>
</ilog:radialAxisRenderers>
<ilog:angularAxis>
<ilog:AngularAxis categoryField="Month"<br /> displayName="Month"
id="aAxis"/>
</ilog:angularAxis>
<ilog:radialAxis>
<mx:LinearAxis baseAtZero="true" maximum="100"<br /> displayName="Temperature"/>
</ilog:radialAxis>
<ilog:series>
<ilog:RadarLineSeries dataField="Temperature"<br /> displayName="Temperature"/>
</ilog:series>
</ilog:RadarChart>
<mx:Legend dataProvider="{radar}"/>
</mx:Panel>
</mx:Application>
Hope this helps,
More...
[peeps147 said:]
That worked perfectly. Thanks!! =0)
I have one more question...can is there a way to change the labels to the same color as the radial lines they represent? Thanks again for your help!

SystemAdmin
110000D4XK
‏2009-02-26T23:42:03Z
[peeps147 said:]
That worked perfectly. Thanks!! =0)
I have one more question...can is there a way to change the labels to the same color as the radial lines they represent? Thanks again for your help!
More...
[dmandrioli said:]
Hi,
This should be possible using AngularAxisRenderer.labelRenderer property. Unfortunately, there is a bug in the library (registered here: http://elixir-bugs.ilog.com/browse/ELIXIR-662). This will be fixed for the next patch.
Sorry for the inconvenience...