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

Categories

DW
IBM Blockchain
Cloud
IBM messaging
IBM SmartCloud Applica...
Worklight
Tivoli Business Servic...
dW China
Spanish
Italy
C/C++ compilers for IB...
Campaign
IBM SmartCloud Applica...
IBM SmartCloud Applica...
IBM TRIRIGA CAD Integr...
Facilities Management ...
Education
Cast Iron PIPs and TIPs
IBM SPSS Collaboration...
IBM SPSS Accessibility
RDi - Rational Develop...
Regional
Cognos Express
SOA и Web-сервисы
XML
Rational Developer for...
Functional and GUI Tes...
Real-time and Embedded...
Rational Team Concert
Installing/Configuring...
Robocode
eserver
Test Forum for Alberto
Comunita' tecnica AIX ...
Government
Fabrication and Assembly
aW
AIX and Linux on POWER
IBM Research Labs
Open Source
Autonomic computing
Report abuse
Optim Test Data Fabric...
DB2 for z/OS forum
Master the Mainframe G...
IBM PureData-Enzee Com...
Part 3 - Challenge #14...
WebSphere Application ...
WebSphere Enterprise S...
IBM Security Identity ...
QRadar Extensions
News & Announcements
HA - High Availability
Service / Adapter Conf...
Gentran Integration Su...
Gentran Basic, RTE, Co...
Distributed Order Mana...
Gentran Server for AS/400
Gentran Director
General Discussion
IBM Control Center
Connect:Direct for UNIX
Connect:Enterprise Mai...
Connect:Direct for Win...
Connect:Direct for UNIX
Multi-Channel Fullfill...
Selling System SDK
C3 Configurator
Tools & Technology
Application Best Pract...
Dealing With Your ERP ...
Upgrade Issues
Data Services/Data Mig...
Performance & Optimiza...
Connect:Direct (Educat...
Call Center Order Mana...
Service Definition Fra...
WebSphere
WebLogic - JMS
Weblogic
IBM ILOG Elixir Previe...
.NET Visualization Pro...
Java Visualization Pro...
Constraint Programming
IBM Operational Decisi...
OPL using CP Optimizer
General BRMS Discussion
Форумы Open Source
Форум по AIX и UNIX
Information Server - J...
QEDWiki
IBM Mote Runner SDK
IBM Extensions for Mem...
Programming Contest Ce...
Tivoli Application Dep...
IBM Enterprise Asset M...
IBM i: Logical Partiti...
PowerVM Forum
AIX Networking
HPC Central Technical ...
IBM BladeCenter Forum
General Parallel File ...
XQuery and XPath forum
IBM Java Runtimes and ...
Java filter
IBM DataPower Gateways
Web Services Technical
Best Practices for SOA...

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile