Radar charts
Glow Effect on Radar Chart Line
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); }
Related Links
Disable datatip for some of the series...
Error updating radarchart
Change the orientation of the category label
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