Radar charts
Multiple Stroke Colors for Radial Lines
[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...
Related Links
Labels size
Customizing radar charts angular axis labels
Custom labelFunction for radarchart
Linear Gradient as fill for RadarColumnSerie
Dragging Radar Line Series
How to change angular axis minimum and maximum?
RadarColumnSeries Remove Column Tapering on Large Values
Need to create radar chart without writing code
Radar Labels don\'t update
Radarchart gradient background
Run Time Radar Data
Rotating the angular axis
Set the chart.type="Cloumn" default
pls help me
How could I change RadarLinesSeries using Action Script?
Radar Chart - Custom Labels