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

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
Trouble with AngularAxisRenderer.labelRenderer on RadarChart
Multiple Stroke Colors for Radial Lines
could not find source for resource bundle ilogradarchart
using datafunction for RadarLineSeries

Categories

DW
IBM Security
Tivoli Netcool/Impact
Rational
i2 Software
IBM Connections Cloud ...
FileNet Business Proce...
IBM Kenexa LCMS Premier
Tivoli Security Compli...
Interact
NetInsight Enterprise
IBM SmartCloud Applica...
Facilities Maintenance...
Jazz for Service Manag...
Tivoli Business Servic...
Cast Iron Runtime Appl...
Báo cáo về các nội dun...
Cognos BI 10
Cognos 8
ISV und Entwickler For...
Rational
IBM Rational Asset Ana...
Unified Modeling Langu...
Real-time and Embedded...
Серверы IBM System x
wireless
university
tivoli
Industry Network Forums
Networking
IBM Research Labs
Community
Open Source
Power Architecture
IBM DB2 Analytics Acce...
IBM Toolbox for Java a...
Visualization
Part 3 - Challenge #14...
Digital Advertising
Part 2 - Challenge #10...
CICS Explorer
IBM Monitoring and Dia...
WebSphere Service Regi...
Network Intrusion Prev...
IBM Security Identity ...
News & Announcements
API
Right-click Integrations
Web Services
Mapping / Translation
General Discussions
Gentran Server for AS/400
**NEW** Sterling File ...
Connect:Express
Sterling Secure Proxy
Connect:Direct (Educat...
Warehouse Management
Mobile Store Channel
Gentran Windows upgrad...
Connect:Direct Mainframe
Connect:Enterprise Gat...
Application Best Pract...
System Performance
Release 7.0
Release 6.7
Containerization, Pack...
Performance Tuning
Delivery and Service S...
Security
Weblogic Misc
RDi Forum
IBM ILOG Elixir General
C++ Visualization Prod...
Constraint Programming
Business/IT Issues & B...
OPL using CPLEX Optimizer
Rule Team Server
Decision Validation Se...
Rule Studio for Java
FAQ
Activities
IBM Extensions for Mem...
Maximo and process aut...
OMEGAMON Performance M...
IBM Platform MPI Commu...
z/OS Communications Se...
IBM SCORE
AIX Forum
Active Memory Expansion
XForms technology forum
Improve Your Java Code...
Linux for Power Archit...
IBM SCORE

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile