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

Can I set the MAX value in each category axis of radarchart?
Radar Chart of IBM ILOG Trial Version
Glow Effect on Radar Chart Line
Need help adding dynamic series to Radar Chart
Start at 90 not 0
Obtaining radar chart Linear Axis coordinates
Negative values ?
Disable datatip for some of the series...
Error updating radarchart
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?

Categories

DW
Compiler Cafe
IBM Connections Cloud
ibm_ru
dwjapan
Brazil
Lotus
alphaWorks
IBM Web Mail Cloud
IBM CMIS for ECM
eDiscovery
IBM Security Identity ...
NetInsight Enterprise
IBM SmartCloud Applica...
Environmental and Ener...
Deployment and Configu...
Cast Iron PIPs and TIPs
Python Programmability...
IBM Analytic Catalyst ...
Getting Started with I...
IBM ILOG Elixir
Cognos 8
IBM Cognos 论坛 - 中文
Rational
IBM developerWorks Россия
Rational DOORS General...
websphere
autonomic
architecture
university
workplace
eserver
lotus
Electronics
Education and Learning
On Demand
IBM Storage Insights (...
Power Architecture
Wireless
Informix developer and...
DB2 for i
IBM Content Integrator
Blockchain Technology
Công ty thiết kế website
Migrating to WebSphere...
Digital Advertising
IBM Visual Configurati...
Security Access Manage...
IBM Security Identity ...
iPhone Mobile Apps
Sterling Information B...
Performance / Scaling
Gentran Server for Unix
Gentran Director
Gentran:Server for Win...
Education
Industry
Customer Order Managem...
Applications Framework
Gentran Integration Su...
Connect:Direct for Ope...
Connect:Enterprise Mai...
Connect:Direct for iSe...
**Announcements & Ster...
Documentation
C3 Analyzer Q&A
C3 Analyzer Installation
Test Area
SDK Tools & Utilities
Distance Education Sup...
Release 6.7
Release 6.4
Release 6.0
Announcements -
Zee Miscellaneous
Internationalization a...
Product Management
IBM z Systems Developm...
HATS HotSpot
Gantt charts
OLAP & Pivot Charts
Business/IT Issues & B...
CPLEX Optimizers
Форумы по технологии Java
Activities
Programming Contest Ce...
Performance Management...
IBM i: Backup/Recovery
IBM i IBM i Performanc...
z/OS Communications Se...
Web 2.0 Apps
General Parallel File ...
Performance Tools Forum
IBM System Storage
IBM WebSphere Portal a...
IBM Customer Experienc...
Thinking XML forum
Middleware and Web ser...

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile