Radar charts


Modifying the Radar Chart


[mlegris said:]
Hi.
I developed this radar chart component in AS2 in early 2006. My clients want to migrate their application to AS3. I have been working for Adobe on the Verizon Wireless MediaStore (using Flex) for the last 5 months, so I have gained a good understanding of Flex 3. I am trying to see if it would be easier to re-write the radar chart in Flash AS3, or use your component & flex 3. Could you give an idea of the level of effort involved in modifying your radar chart to match (not necessarily exactly, but the main elements need to be there) the following rendering?
[img]http://www.newcommerce.ca/ssss/radarcapture.png[/img]
Thanks
Martin Legris
SystemAdmin
110000D4XK
‏2008-12-08T19:12:05Z
[dmandrioli said:]
Hi Martin,
As a POC, I wrote the code below (do not focus on data).
Your angular axis is really complex so I used your image behind the radar chart with a Canvas. This image can be a swf (scalable) or a bitmap (non scalable).
I have done some modifications on your image:
- Erase the center
- Rotation of 16.37° in order to align radial axes. (with ILOG Elixir Radar Chart, the first radial axis is always from the center to the right). The grey background is a gradient, not easy to re-fill but if you have the source it should be easy.
Here is the code:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ilog="http://www.ilog.com/2007/ilog/flex" xmlns:charts="ilog.charts.*"<br /> layout="absolute" backgroundColor="0xFFFFFF" backgroundGradientAlphas="[]">
<mx:Script> <![CDATA[<br /> import mx.graphics.Stroke;
import mx.collections.ArrayCollection;
[Bindable]
public var london: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}
]);
]]> </mx:Script>
<mx:Image source="#Embed(source='angular.png')" id="back"/>
<ilog:RadarChart x="{back.width / 2 - 200}" y="{back.height / 2 - 200}" width="400" height="400" showDataTips="true" id="radarchart" type="circular">
<ilog:radialAxisRenderers>
<mx:AxisRenderer visible="false"/>
</ilog:radialAxisRenderers>
<ilog:angularAxisRenderers>
<ilog:AngularAxisRenderer visible="true" showLabels="false" axisStroke='{new Stroke(0xFFFFFF)}'/>
</ilog:angularAxisRenderers>
<ilog:angularAxis>
<ilog:AngularAxis dataProvider="{london}" categoryField="Month" displayName="Month"/>
</ilog:angularAxis>
<ilog:radialAxis>
<mx:LinearAxis minimum="20" maximum="90" <br /> displayName="Temperature (°F)"/>
</ilog:radialAxis>
<ilog:series>
<ilog:RadarLineSeries dataProvider="{london}" dataField="Temperature" displayName="London Temperature"<br /> areaFill="{null}"/>
</ilog:series>
</ilog:RadarChart>
</mx:Application>
The new image is attached to the post.
Hope this helps,
More...
[mlegris said:]
Hi Damien,
the background isn't an image. The whole thing is dynamically produced based on data, including the circles around it with the names. There are categories and then actual indicators for the data and I need to represent both.
Right now it is one component, but I guess it could be two (one behind and your radar chart over). I'd really need to see the source code to know how much work it represents, alas I need to buy it to see the source code right?
thanks.
Martin
SystemAdmin
110000D4XK
‏2008-12-11T00:58:52Z
[mlegris said:]
Hi Damien,
the background isn't an image. The whole thing is dynamically produced based on data, including the circles around it with the names. There are categories and then actual indicators for the data and I need to represent both.
Right now it is one component, but I guess it could be two (one behind and your radar chart over). I'd really need to see the source code to know how much work it represents, alas I need to buy it to see the source code right?
thanks.
Martin
More...
[Christophe said:]
Martin,
I guess that could be quite a bit of work but you can create your own axis renderer to draw the above axis and set it on the RadarChart.angularAxisRenders property. If you want to look at the code, then yes, you need to buy the product.
Hope this helps,
[dmandrioli said:]
Hi Martin,
As a POC, I wrote the code below (do not focus on data).
Your angular axis is really complex so I used your image behind the radar chart with a Canvas. This image can be a swf (scalable) or a bitmap (non scalable).
I have done some modifications on your image:
- Erase the center
- Rotation of 16.37° in order to align radial axes. (with ILOG Elixir Radar Chart, the first radial axis is always from the center to the right). The grey background is a gradient, not easy to re-fill but if you have the source it should be easy.
Here is the code:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ilog="http://www.ilog.com/2007/ilog/flex" xmlns:charts="ilog.charts.*"<br /> layout="absolute" backgroundColor="0xFFFFFF" backgroundGradientAlphas="[]">
<mx:Script> <![CDATA[<br /> import mx.graphics.Stroke;
import mx.collections.ArrayCollection;
[Bindable]
public var london: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}
]);
]]> </mx:Script>
<mx:Image source="#Embed(source='angular.png')" id="back"/>
<ilog:RadarChart x="{back.width / 2 - 200}" y="{back.height / 2 - 200}" width="400" height="400" showDataTips="true" id="radarchart" type="circular">
<ilog:radialAxisRenderers>
<mx:AxisRenderer visible="false"/>
</ilog:radialAxisRenderers>
<ilog:angularAxisRenderers>
<ilog:AngularAxisRenderer visible="true" showLabels="false" axisStroke='{new Stroke(0xFFFFFF)}'/>
</ilog:angularAxisRenderers>
<ilog:angularAxis>
<ilog:AngularAxis dataProvider="{london}" categoryField="Month" displayName="Month"/>
</ilog:angularAxis>
<ilog:radialAxis>
<mx:LinearAxis minimum="20" maximum="90" <br /> displayName="Temperature (°F)"/>
</ilog:radialAxis>
<ilog:series>
<ilog:RadarLineSeries dataProvider="{london}" dataField="Temperature" displayName="London Temperature"<br /> areaFill="{null}"/>
</ilog:series>
</ilog:RadarChart>
</mx:Application>
The new image is attached to the post.
Hope this helps,

Related Links

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?
how to work with the radar control
Changing the order of the radial axis
LinearGradient as areaFill
Get the selected label when clicks on Angular Axis

Categories

DW
Compiler Cafe
Unica
IBM Connections Cloud ...
IBM Web Mail Cloud
IBM Case Manager Client
IBM Content Navigator
IBM Kenexa BrassRing o...
IBM Kenexa LMS
NetInsight Enterprise
eMessage7
PredictiveInsight
IBM SmartCloud Applica...
Real Estate Management
Open Beta Feedback
Mobile Devices
Transportation Managem...
SPSS Community News
.NET Programmability
WebSphere ILOG Busines...
Cognos Mobile 10
ISV und Entwickler For...
Eventos en Latinoamérica
AIX и UNIX
IBM Rational Rhapsody
Rational Performance T...
Rational DOORS adminis...
Rational Application D...
Build and Release Mana...
webservices
Solaris to Linux Migra...
Wholesale
Healthcare and Life Sc...
Multicore enablement
IBM i
Report abuse
InfoSphere Master Data...
.NET Development with ...
InfoSphere QualityStage
IBM DB2 Express-C Forum
InfoSphere DataStage
DB2 for z/OS forum
InfoSphere Metadata Se...
Part 2 - Challenge #12...
IBM Forms Experience B...
Master the Mainframe G...
WebSphere Enterprise S...
Network Protection (XGS)
Collecting Windows Eve...
Mobile Store Channel
Reporting
Gentran Basic, RTE, Co...
Connect:Enterprise
JSP Webpages in GIS
Connect:Express Windows
Project Management and...
Comergent Security
Connect:Direct (Educat...
Configuring Warehouse ...
Receipts
Logistics Management
Delivery and Service S...
Store Order Management
Oracle
Entity/DB Framework
WebSphere-Default Mess...
C++ Visualization Prod...
Mathematical Programming
IBM ILOG BRMS Beta Pro...
BRMS Trial Support
Organization charts
Constraint Programming...
DB2 Content Management
Visual Performance Ana...
Netcool OMNIbus
IBM Tivoli Network Man...
IBM SmartCloud Control...
IBM Whole-system Analy...
AIX Security
XML and Java Technology
Best Practices for SOA...
Linux tech support forum

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile