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

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
pls help me
How could I change RadarLinesSeries using Action Script?

Categories

DW
PowerVM
Tivoli Netcool/Impact
Worklight
Brazil
Globalization
Linux on Power Community
LPM (Live Partition Mo...
IBM SmartCloud Notes
IBM Kenexa Prove It! O...
IBM Kenexa Assess on C...
Security Access Manage...
Netcool/Impact General...
Netcool/Impact Future ...
Optimize
CustomerInsight
IBM SmartCloud Applica...
Environmental and Ener...
IBM Tivoli Monitoring ...
Server Automation
Labs (BigFix Labs)
Transportation Managem...
Getting Started with I...
RDz - Rational Develop...
IBM ILOG Elixir
IBM ILOG Visualization
Cognos TM1 (Applix)
IBM Cognos 论坛 - 中文
SOA и Web-сервисы
Service Virtualization
webservices
db2
Comunita' tecnica AIX ...
Telecommunications
Insurance
Automotive
aW
OpenCL Development Kit...
IBM Web Server Plug-in...
Networking
Lotus
XML
Linux
DB2 for Linux, UNIX, a...
IBM DB2 Analytics Acce...
WAPL and SOE - Workloa...
hrdf
Migrating to WebSphere...
IBM WebSphere Transfor...
Network Protection (XGS)
Network Intrusion Prev...
zSecure suite
IBM Security Access Ma...
IBM Security Identity ...
QRadar Incident Forens...
Investigating with QRadar
OM Mobile Framework
iPhone Mobile Apps
Business Process Modeling
Release Bulletins
Sterling Commerce Stuff
Applications Framework
Gentran Mapping
IBM Control Center
Connect:Direct for Win...
Connect:Direct Mainframe
Connect:Express Windows
Connect:Direct for Win...
Connect:Direct for UNIX
Backend Systems
C3 Product Depot
C3 Replenishment
Feature Request
Adoption Rates
C3 Partner.com/C3 Stor...
Yard Management
Containerization, Pack...
Distributed Order Mana...
Database
Shipping
WebSphere-Misc
RPG Cafe
Moderator Collaboration
BRMS Trial Support
Business Rules Best Pr...
General BRMS Discussion
Calendar
C++ Visualization Prod...
Business Rules Best Pr...
QEDWiki
Replication Monitoring...
Building Information M...
IBM SmartCloud Control...
Tivoli Application Dep...
IBM Platform MPI Commu...
IBM i: iDoctor for IBM...
Communications Server ...
System x Server
IBM Flex Systems
Lotus Web Content Mana...
General Parallel File ...
IBM Java Runtimes and ...
ibmpub.java.aix
Improve Your Java Code...
Java Virtual Machine (...

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile