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

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
Modifying the Radar Chart
How to change thickness/color of radar chart border
Clickable points on radar line series?

Categories

DW
export
IBM Connections Docs C...
IBM Verse
IBM SmartCloud Notes
IBM FileNet Records Ma...
IBM FileNet Image Manager
IBM Content Navigator
IBM FileNet Content Ma...
IBM Kenexa HDAS Assess...
Application Performanc...
eMessage8
Optimize
PredictiveInsight
IBM SmartCloud Applica...
IBM TRIRIGA UX Framework
Environmental and Ener...
Patch Management
Cast Iron Web Manageme...
IBM Analytic Catalyst ...
RDz - Rational Develop...
IBM Cognos 论坛 - 中文
WebSphere
IBM developerWorks Россия
Rational DOORS DXL
Rational Developer for...
Rational DOORS adminis...
Development Tools (RAD...
Системы хранения данны...
Серверы IBM System x
xml
Java
tivoli
Mainframe Brasil
Brazil - Java`s Forum
Telecommunications
Education and Learning
Ajax
Autonomic computing
Java
Công ty thiết kế website
IBM Business Process M...
IBM Visual Configurati...
WebSphere Application ...
WebSphere Enterprise S...
WebSphere DataPower XC...
IBM Security Identity ...
HA - High Availability
Offense Manager & Tuning
Transportation Managem...
Collaboration Network
Business Process Modeling
Gentran Director
Connect:Enterprise
Connect:Direct (Educat...
Gentran Integration Su...
Gentran Director
JSP Webpages in GIS
Gentran Integration Su...
General Discussion
Connect:Enterprise Gat...
Backend Systems
Selling System SDK
Courses & Courseware
C3 Replenishment
Feature Request
SDK Tools & Utilities
Error Messages
Release 6.4
Yard Management
Outbound planning
Product Management
Inventory
Store Order Management
App Servers
WebSphere-Misc
IBM z Systems Developm...
Rules for .NET
Gauges, Indicators and...
Radar charts
Constraint Programming...
SAP
IBM Mote Runner SDK
Maximo and process aut...
IBM SmartCloud Cost Ma...
IBM Platform MPI Commu...
Using developerWorks
PowerHA (Formerly know...
IT architecture forum
JSF for nonbelievers f...
Web Services Technical

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile