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

Categories

DW
IBM SmartCloud Applica...
dW
C/C++ compilers for IB...
IBM Connections Cloud ...
IBM FileNet Capture Pr...
IBM Kenexa Hot Lava Mo...
zSecure suite
IBM Application Perfor...
Marketing Operations
IBM SmartCloud Applica...
IBM TRIRIGA Applicatio...
IBM TRIRIGA CAD Integr...
Security Configuration...
Web Reports and Custom...
Multi-Channel Fullfill...
Cast Iron Best Practices
Cast Iron PIPs and TIPs
Graphics
IBM SPSS Accessibility
RPG Cafe
Cognos Enterprise BI
Cognos Series 7
SOA и Web-сервисы
IBM developerWorks Россия
Information Management
IBM Rational Asset Ana...
Rational Method Compos...
Rational Team Concert
opensource
lotus
Lotus Brasil
Solaris to Linux Migra...
Telecommunications
Industry Network Forums
HeapAnalyzer
IBM Automation Control...
Networking
.NET Development with ...
Optim LUW
InfoSphere Information...
For All Type Post
Master the Mainframe G...
IBM WebSphere Applicat...
IBM Security Access Ma...
DSM Extensions, Custom...
API
VA & Scanners / Assets...
Mobile Store Channel
Collaboration Network
Gentran Mapping
Gentran Integration Su...
Applications Q & A
Reports and Prints
Customer Order Managem...
Gentran Mapping
Gentran Windows upgrad...
Gentran Server for Win...
General Discussion
Connect:Express Unix
Connect:Direct for iSe...
Selling System Release...
SDK Releases
ROI Issues
SDK Tools & Utilities
Data Services/Data Mig...
Back End Integation
Platform Issues
Internationalization (...
Release 7.0
Release 6.0
Release 5.6
Zee Miscellaneous
Outbound planning
Logistics
Oracle
WebSphere-MQ
RPG Cafe
IBM ILOG Elixir Previe...
Business Rules Best Pr...
Radar charts
WebSphere MQ Family
IBM Image Construction...
IBM Tivoli System Auto...
IBM Spectrum Control
Active Memory Expansion
Cluster Systems Manage...
IBM WebSphere Portal a...
Using XSL-FO to create...

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile