Radar charts


Change the orientation of the category label


I have a lot of class and some do not appear when I search for a solution to the labels inclined to display all categories.
I thought of making examples of indices 1 2 3 and put a caption example
1: trRA_WhoAppointsMembers_PA1
2: trRA_WhoAppointsMembers_PA2
Thank you in advance for your reply.
Hi,
Sorry for the late reply. Instead of inclining labels (I'm not sure it' possible to get something nice), I suggest to redefine the labelRenderer of AngularAxisRenderer class. You can use a Spark Label with maxDisplayedLine=2 and a maxWidth set. The following sample shows such a solution.
<?xml version=
"1.0" ?> <mx:Application xmlns:mx=
"http://www.adobe.com/2006/mxml" xmlns:s=
"library://ns.adobe.com/flex/spark" xmlns:ilog=
"http://www.ilog.com/2007/ilog/flex"> <mx:Script> <![CDATA[
import mx.collections.ArrayCollection; [Bindable]
public var temperature:ArrayCollection =
new ArrayCollection([
{Month:
"A long text to test wrapping", London:39, Sydney:71.8, Beijing:23.7
},
{Month:
"February", London:39.6, Sydney:71.8, Beijing:28.8
},
{Month:
"March", London:42.3, Sydney:69.8, Beijing:40.5
},
{Month:
"A long test to test word wrapping", London:47.3, Sydney:65.1, Beijing:56.5
},
{Month:
"May", London:53.4, Sydney:59.5, Beijing:68
},
{Month:
"June", London:59.4, Sydney:55.2, Beijing:75.9
},
{Month:
"July", London:62.6, Sydney:53.6, Beijing:78.8
},
{Month:
"August", London:61.9, Sydney:55.8, Beijing:76.5
},
{Month:
"September", London:57.6, Sydney:59.5, Beijing:67.6
},
{Month:
"October", London:50.5, Sydney:63.9, Beijing:54.7
},
{Month:
"November", London:43.9, Sydney:67.1, Beijing:39
},
{Month:
"December", London:40.6, Sydney:70.2, Beijing:27.3
} ]); ]]> </mx:Script> <mx:Panel width=
"100%" height=
"100%" title=
"Radar Line Series Example" layout=
"horizontal"> <ilog:RadarChart id=
"radarchart" width=
"100%" height=
"100%" dataProvider=
"{temperature}" showDataTips=
"true"> <ilog:angularAxis> <ilog:AngularAxis categoryField=
"Month" displayName=
"Month"/> </ilog:angularAxis> <ilog:angularAxisRenderers> <ilog:AngularAxisRenderer> <ilog:labelRenderer> <mx:Component> <s:ItemRenderer> <s:Label maxDisplayedLines=
"2" text=
"{data.text}" maxWidth=
"100" textAlign=
"center"/> </s:ItemRenderer> </mx:Component> </ilog:labelRenderer> </ilog:AngularAxisRenderer> </ilog:angularAxisRenderers> <ilog:radialAxis> <mx:LinearAxis baseAtZero=
"true" displayName=
"Temperature (°F)"/> </ilog:radialAxis> <ilog:series> <ilog:RadarLineSeries dataField=
"London" displayName=
"London"/> <ilog:RadarLineSeries dataField=
"Sydney" displayName=
"Sydney"/> <ilog:RadarLineSeries dataField=
"Beijing" displayName=
"Beijing"/> </ilog:series> </ilog:RadarChart> <mx:Legend dataProvider=
"{radarchart}"/> </mx:Panel> </mx:Application>
Hope this helps,
Damien
SystemAdmin
110000D4XK
‏2010-10-11T10:49:33Z
Hi,
Sorry for the late reply. Instead of inclining labels (I'm not sure it' possible to get something nice), I suggest to redefine the labelRenderer of AngularAxisRenderer class. You can use a Spark Label with maxDisplayedLine=2 and a maxWidth set. The following sample shows such a solution.
<pre class="jive-pre">
<?xml version=
"1.0" ?> <mx:Application xmlns:mx=
"http://www.adobe.com/2006/mxml" xmlns:s=
"library://ns.adobe.com/flex/spark" xmlns:ilog=
"http://www.ilog.com/2007/ilog/flex"> <mx:Script> <![CDATA[
import mx.collections.ArrayCollection; [Bindable]
public var temperature:ArrayCollection =
new ArrayCollection([
{Month:
"A long text to test wrapping", London:39, Sydney:71.8, Beijing:23.7
},
{Month:
"February", London:39.6, Sydney:71.8, Beijing:28.8
},
{Month:
"March", London:42.3, Sydney:69.8, Beijing:40.5
},
{Month:
"A long test to test word wrapping", London:47.3, Sydney:65.1, Beijing:56.5
},
{Month:
"May", London:53.4, Sydney:59.5, Beijing:68
},
{Month:
"June", London:59.4, Sydney:55.2, Beijing:75.9
},
{Month:
"July", London:62.6, Sydney:53.6, Beijing:78.8
},
{Month:
"August", London:61.9, Sydney:55.8, Beijing:76.5
},
{Month:
"September", London:57.6, Sydney:59.5, Beijing:67.6
},
{Month:
"October", London:50.5, Sydney:63.9, Beijing:54.7
},
{Month:
"November", London:43.9, Sydney:67.1, Beijing:39
},
{Month:
"December", London:40.6, Sydney:70.2, Beijing:27.3
} ]); ]]> </mx:Script> <mx:Panel width=
"100%" height=
"100%" title=
"Radar Line Series Example" layout=
"horizontal"> <ilog:RadarChart id=
"radarchart" width=
"100%" height=
"100%" dataProvider=
"{temperature}" showDataTips=
"true"> <ilog:angularAxis> <ilog:AngularAxis categoryField=
"Month" displayName=
"Month"/> </ilog:angularAxis> <ilog:angularAxisRenderers> <ilog:AngularAxisRenderer> <ilog:labelRenderer> <mx:Component> <s:ItemRenderer> <s:Label maxDisplayedLines=
"2" text=
"{data.text}" maxWidth=
"100" textAlign=
"center"/> </s:ItemRenderer> </mx:Component> </ilog:labelRenderer> </ilog:AngularAxisRenderer> </ilog:angularAxisRenderers> <ilog:radialAxis> <mx:LinearAxis baseAtZero=
"true" displayName=
"Temperature (°F)"/> </ilog:radialAxis> <ilog:series> <ilog:RadarLineSeries dataField=
"London" displayName=
"London"/> <ilog:RadarLineSeries dataField=
"Sydney" displayName=
"Sydney"/> <ilog:RadarLineSeries dataField=
"Beijing" displayName=
"Beijing"/> </ilog:series> </ilog:RadarChart> <mx:Legend dataProvider=
"{radarchart}"/> </mx:Panel> </mx:Application>
</pre>
Hope this helps,
Damien
More...
Thanks and apologies for not searching in RadarChart forum before asking.
Anyway, do you have any sample for doing that with actionscript code?
Thanks again.
Lotas
060000SMNA
‏2010-10-15T08:14:47Z
Thanks and apologies for not searching in RadarChart forum before asking.
Anyway, do you have any sample for doing that with actionscript code?
Thanks again.
More...
Hi,
You can do it in Actionscript but it's far more verbose, especially because the data binding of data.value will be more difficult to obtain.
A solution would be to write a specific IFactory which let's you add binding to properties on the generator class.
Why do you need an Actionscript only solution?
Hope this helps,
Damien
SystemAdmin
110000D4XK
‏2010-10-15T09:54:13Z
Hi,
You can do it in Actionscript but it's far more verbose, especially because the data binding of data.value will be more difficult to obtain.
A solution would be to write a specific IFactory which let's you add binding to properties on the generator class.
Why do you need an Actionscript only solution?
Hope this helps,
Damien
More...
Hi,
Well, that's a long and sas story....
I'm making new RadarChart objects dinamically by code, so I need doing so with itemRenderer.
Reading ilog AngularAxisRenderer documentation, I see this in labelRenderer property:
"A reference to the factory used to render the axis labels. This type must implement the IDataRenderer and IFlexDisplayObject interfaces."
So, doing something like could be valid:
var angAxisRenderer:AngularAxisRenderer = new AngularAxisRenderer();
angAxisRenderer.labelRenderer = mycomponents.renderers.MultiLineLabel;
radarchart.angularAxisRenderers = angAxisRenderer
Where MultiLineLabel is a custom class implementing IDataRenderer and IFlexDisplayObject interfaces.
Could you post a sample of this class MultiLineLabel or any clue?
Thanks
Lotas
060000SMNA
‏2010-10-15T10:53:40Z
Hi,
Well, that's a long and sas story....
I'm making new RadarChart objects dinamically by code, so I need doing so with itemRenderer.
Reading ilog AngularAxisRenderer documentation, I see this in labelRenderer property:
"A reference to the factory used to render the axis labels. This type must implement the IDataRenderer and IFlexDisplayObject interfaces."
So, doing something like could be valid:
var angAxisRenderer:AngularAxisRenderer = new AngularAxisRenderer();
angAxisRenderer.labelRenderer = mycomponents.renderers.MultiLineLabel;
radarchart.angularAxisRenderers = angAxisRenderer
Where MultiLineLabel is a custom class implementing IDataRenderer and IFlexDisplayObject interfaces.
Could you post a sample of this class MultiLineLabel or any clue?
Thanks
More...
Hi again,
Your pseudo-code can't work: labelRenderer is of type IFactory. It's the generator class of the factory which has to implement the IDataRenderer and IFlexDisplayObject interfaces.
You can write a custom item renderer like this (MultiLineRenderer.mxml):
<?xml version=
"1.0" encoding=
"utf-8"?> <s:ItemRenderer xmlns:fx=
"http://ns.adobe.com/mxml/2009" xmlns:s=
"library://ns.adobe.com/flex/spark" xmlns:mx=
"library://ns.adobe.com/flex/mx"> <s:Label text=
"{data.text}" maxDisplayedLines=
"2" maxWidth=
"100"/> </s:ItemRenderer>
Then use it like this:
var cf:ClassFactory =
new ClassFactory(); cf.generator = MultiLineLabelRenderer; myAxis.labelRenderer = cf;
Hope this helps,
Damien
SystemAdmin
110000D4XK
‏2010-10-15T12:44:46Z
Hi again,
Your pseudo-code can't work: labelRenderer is of type IFactory. It's the generator class of the factory which has to implement the IDataRenderer and IFlexDisplayObject interfaces.
You can write a custom item renderer like this (MultiLineRenderer.mxml):
<pre class="jive-pre">
<?xml version=
"1.0" encoding=
"utf-8"?> <s:ItemRenderer xmlns:fx=
"http://ns.adobe.com/mxml/2009" xmlns:s=
"library://ns.adobe.com/flex/spark" xmlns:mx=
"library://ns.adobe.com/flex/mx"> <s:Label text=
"{data.text}" maxDisplayedLines=
"2" maxWidth=
"100"/> </s:ItemRenderer>
</pre>
Then use it like this:
<pre class="jive-pre">
var cf:ClassFactory =
new ClassFactory(); cf.generator = MultiLineLabelRenderer; myAxis.labelRenderer = cf;
</pre>
Hope this helps,
Damien
More...
Hi,
Yes, I've been surfing internet and I've found that ClassFactorywas is needed.
On the other hand I'm working with Flex SDK 3.2 and that Label multiline component comes with Flex 4, right?
Do you know any other similar component working for SDK 3.2?
Sorry, I know this is not an ilog question but I would be grateful for any suggestions..
Thanks.
Lotas
060000SMNA
‏2010-10-15T14:39:16Z
Hi,
Yes, I've been surfing internet and I've found that ClassFactorywas is needed.
On the other hand I'm working with Flex SDK 3.2 and that Label multiline component comes with Flex 4, right?
Do you know any other similar component working for SDK 3.2?
Sorry, I know this is not an ilog question but I would be grateful for any suggestions..
Thanks.
More...
Hi,
AFAIK, the only MX component which supports multi-line is <mx:TextArea/> but this won't fit your need because TextArea does not use its content to size itself.
You can try to write a simple multi-line component by your own using several <mx:Label/> instances, something like:
<?xml version=
"1.0" encoding=
"utf-8"?> <mx:VBox xmlns:fx=
"http://ns.adobe.com/mxml/2009" xmlns:s=
"library://ns.adobe.com/flex/spark" xmlns:mx=
"library://ns.adobe.com/flex/mx" verticalGap=
"0"> <mx:Label text=
"{(data.text as String).substr(0, 3)}"/> <mx:Label text=
"{(data.text as String).substr(3)}"/> </mx:VBox>
Hope this helps,
Damien
SystemAdmin
110000D4XK
‏2010-10-18T08:39:51Z
Hi,
AFAIK, the only MX component which supports multi-line is <mx:TextArea/> but this won't fit your need because TextArea does not use its content to size itself.
You can try to write a simple multi-line component by your own using several <mx:Label/> instances, something like:
<pre class="jive-pre">
<?xml version=
"1.0" encoding=
"utf-8"?> <mx:VBox xmlns:fx=
"http://ns.adobe.com/mxml/2009" xmlns:s=
"library://ns.adobe.com/flex/spark" xmlns:mx=
"library://ns.adobe.com/flex/mx" verticalGap=
"0"> <mx:Label text=
"{(data.text as String).substr(0, 3)}"/> <mx:Label text=
"{(data.text as String).substr(3)}"/> </mx:VBox>
</pre>
Hope this helps,
Damien
More...
Hi,
Thanks, I'm trying this:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<mx:Text text="{data.text}" width="150" minWidth="100" maxWidth="200"/>
</mx:VBox>
It seems to work fine, doing its job...but sometimes when I try resizing chart (it's inside a VBox container) appears this error:
ReferenceError: Error #1056: No se puede crear la propiedad text en componentes.renderers.MultiLineLabelRenderer.
at ilog.charts::AngularAxisRenderer/drawLabels()[/usr/flex/elixir2.5/flex-suite/branches/release-2.5/build/bin/sources/library/chart/src/flex/ilog/charts/AngularAxisRenderer.as:609]
at ilog.charts::AngularAxisRenderer/updateDisplayList()[/usr/flex/elixir2.5/flex-suite/branches/release-2.5/build/bin/sources/library/chart/src/flex/ilog/charts/AngularAxisRenderer.as:763]
at mx.core::UIComponent/validateDisplayList()C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:6351
at mx.managers::LayoutManager/validateDisplayList()C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:622
at mx.managers::LayoutManager/doPhasedInstantiation()C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:695
at mx.managers::LayoutManager/validateNow()C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:748
at mx.effects.effectClasses::TweenEffectInstance/onTweenEnd()C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\effects\effectClasses\TweenEffectInstance.as:390
at mx.effects.effectClasses::ResizeInstance/onTweenEnd()C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\effects\effectClasses\ResizeInstance.as:450
at mx.effects::Tween/endTween()C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\effects\Tween.as:524
at mx.effects::Tween/http://www.adobe.com/2006/flex/mx/internal::doInterval()C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\effects\Tween.as:565
at mx.effects::Tween$/timerHandler()C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\effects\Tween.as:179
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()
Do you have any clue?
Thank you so much for supporting...
Lotas
060000SMNA
‏2010-10-19T09:34:32Z
Hi,
Thanks, I'm trying this:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<mx:Text text="{data.text}" width="150" minWidth="100" maxWidth="200"/>
</mx:VBox>
It seems to work fine, doing its job...but sometimes when I try resizing chart (it's inside a VBox container) appears this error:
ReferenceError: Error #1056: No se puede crear la propiedad text en componentes.renderers.MultiLineLabelRenderer.
at ilog.charts::AngularAxisRenderer/drawLabels()[/usr/flex/elixir2.5/flex-suite/branches/release-2.5/build/bin/sources/library/chart/src/flex/ilog/charts/AngularAxisRenderer.as:609]
at ilog.charts::AngularAxisRenderer/updateDisplayList()[/usr/flex/elixir2.5/flex-suite/branches/release-2.5/build/bin/sources/library/chart/src/flex/ilog/charts/AngularAxisRenderer.as:763]
at mx.core::UIComponent/validateDisplayList()C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:6351
at mx.managers::LayoutManager/validateDisplayList()C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:622
at mx.managers::LayoutManager/doPhasedInstantiation()C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:695
at mx.managers::LayoutManager/validateNow()C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:748
at mx.effects.effectClasses::TweenEffectInstance/onTweenEnd()C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\effects\effectClasses\TweenEffectInstance.as:390
at mx.effects.effectClasses::ResizeInstance/onTweenEnd()C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\effects\effectClasses\ResizeInstance.as:450
at mx.effects::Tween/endTween()C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\effects\Tween.as:524
at mx.effects::Tween/http://www.adobe.com/2006/flex/mx/internal::doInterval()C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\effects\Tween.as:565
at mx.effects::Tween$/timerHandler()C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\effects\Tween.as:179
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()
Do you have any clue?
Thank you so much for supporting...
More...
Hi again,
Seems like AngularAxisRenderer.as is expecting a "text" property in my custom MultiLineLabelRenderer class so I've attached it doing like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<mx:Script>
<![CDATA[
private var _text:String="";
public function set text(str:String):void{
this._text = str;
multilabel.text = str;
}
public function get text():String{
return this._text;
}
]]>
</mx:Script>
<mx:Text id="multilabel" text="{data.text}" width="150" minWidth="100" maxWidth="200"/>
</mx:VBox>
Seems like that error disappears but I see now some issues (doing component resize) in RadarChart (see red rectangle in attached file). Appears wrong and missing points....
Is there any draw problems?
Thanks
Lotas
060000SMNA
‏2010-10-19T10:48:06Z
Hi again,
Seems like AngularAxisRenderer.as is expecting a "text" property in my custom MultiLineLabelRenderer class so I've attached it doing like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<mx:Script>
<![CDATA[
private var _text:String="";
public function set text(str:String):void{
this._text = str;
multilabel.text = str;
}
public function get text():String{
return this._text;
}
]]>
</mx:Script>
<mx:Text id="multilabel" text="{data.text}" width="150" minWidth="100" maxWidth="200"/>
</mx:VBox>
Seems like that error disappears but I see now some issues (doing component resize) in RadarChart (see red rectangle in attached file). Appears wrong and missing points....
Is there any draw problems?
Thanks
More...
Hi,
In order to investigate your issue, please provide a minimal sample which demonstrates the problem.
Thanks,
Damien
SystemAdmin
110000D4XK
‏2010-10-22T09:39:50Z
Hi,
In order to investigate your issue, please provide a minimal sample which demonstrates the problem.
Thanks,
Damien
More...
Hi,
Seems to be fixed recreating the chart.
Thanks.

Related Links

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
Modifying the Radar Chart
How to change thickness/color of radar chart border

Categories

DW
IBM Tivoli Monitoring ...
Cast Iron Community
Developer Central
Weblogs
PowerVM Blogs
Linux on Power Community
COBOL Cafe
C/C++ compilers for IB...
IBM OS Pattern Kit
IBM FileNet Image Manager
IBM Kenexa BrassRing o...
IBM Kenexa CompAnalyst...
IBM Security Identity ...
Netcool/Impact General...
Netcool/Impact Future ...
Detect
Jazz for Service Manag...
Tivoli Business Servic...
Integration Products
Cast Iron Documentation
IBM SPSS Data Collection
IBM SPSS Statistics Ge...
.NET Programmability
IBM SPSS Accessibility
IBM ILOG Elixir
User Groups
Rational DOORS DXL
Rational Developer for...
Rational DOORS adminis...
Real-time and Embedded...
xml
Robocode
eserver
AIX and Linux on POWER
Electronics
Banking
Pattern Modeling and A...
HeapAnalyzer
Tivoli
Autonomic computing
XML
DB2 Temporal
InfoSphere Information...
IBM Content Integrator
Digital Advertising
WebSphere Portal and P...
WebSphere DataPower XC...
SiteProtector
IBM Cloud Identity
IBM Security Identity ...
Collecting Windows Eve...
DSM Extensions, Custom...
Sterling Secure Proxy
Managed File Transfer
Industry
OM Mobile Framework
Gentran Server for AS/400
Multi-Channel Fullfill...
Backend Systems
**Announcements & Ster...
C3 Configurator
Using Eclipse
Data Services/Data Mig...
JavaServer Page & UI
Release 5.5
Release 7 Chit-Chat
Receiving and putaway
Outbound planning
Logistics
Distributed Order Mana...
IDE Tools
RPG Cafe
HATS HotSpot
C++ Visualization Prod...
Moderator Collaboration
IBM Operational Decisi...
C++ Visualization Prod...
CP Optimizer
JRules - General
IBM Simulation Producer
SmartCloud Analytics -...
PowerVM Forum
Active Memory Expansion
HPC Central Technical ...
System x Server
IBM PowerVM Lx86 for x...

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile