We’ve released a radar (spider, polar) chart component for Flex as an open source (MIT) project on github. This is abstracted from our Sonarhq product. For the most part we’ve been using the Flex Charting components from Adobe, but this doesn’t include radar charts. 
We looked at several commercial packages, but these turned out to be either too expensive, or not flexible enough. There is a free component a vailable at Kap Lap, but it didn’t support the styles we needed to match the design we had.
In the end it was easier to produce our own (about a day and a half of work). The project depends on some common libraries we’ve developed at Boost over the last couple of years, which we haven’t decided on open sourcing yet, but we have included the binary under the same license so that the charting component can work. Here’s a demo and how to get going:
Download the code or the swc [230KB] file from github and create a new project. In the project properties add the swc library or open the chart project and include it. Create an application with the following code:
<![CDATA[ private function init():void { radarChart.addAxis('bread'); radarChart.addAxis('cheese'); radarChart.addAxis('wine'); radarChart.addAxis('fish'); radarChart.addAxis('meat'); radarChart.addSeries('Male', {bread: 3, cheese: 4, wine: 5, fish: 1, meat: 4}); radarChart.addSeries('Female', {bread: 4, cheese: 2, wine: 4, fish: 5, meat: 3}); } ]]>
This will show a simple chart similar to the one here. The charts can be styled quite a bit. Take a look through the code to see the styles that can be applied. Note that I haven’t yet allowed for styling the bits of text.
Originally my intention was to extend the flex charting objects in order to implement the chart. Unfortunately I found the structure a bit complex, and documentation for extending non-existent. I’m sure it would have been possible, but I didn’t get very far and just wanted to just get it done.
Update 24th Aug 2009: New release that fixes issues with drawing the highlight and removing series radar_chart-1.1.swc.
Update 28th Oct 2009: New release that fixes removing labels when removing axis: radar_chart-1.2.swc.
Update 16th Jul 2010: Release that works correctly with Flex 4. This is for Flex 4 (Flash Builder 4) only, and will not work with Flex 3. radar_chart-1.3-flex4.swc.
excellent work.
But can someone tell me where to get boost flex common?
github.com/boost/boost-flex-common do not work.
Hi there, we haven’t released the source for the common library yet but the compiled library is included in the libs folder of the Radar Chart – http://github.com/boost/radar-chart/tree/8feef0513ffae94a5bc96b37edc3129656204483/libs
Thanks for putting this together, great solution! I am having problems with the removeSeries method, it doesn’t seem to be removing the series I added. Thanks for any insight.
@Matt: I’ve pushed an update to fix the issue with removing series to the github repo. I’ll update the compiled version sometime in the next week. Cheers.
Awesome job, thanks for making this available.
Hey!
I’m having trouble getting this to compile,
I get:
Error: unable to load SWC boost_common.swc: could not find catalog.xml within the SWC.
Any tips?
Thanks!
Please try downloading the library file from http://cloud.github.com/downloads/boost/radar-chart/boost_common.swc and including it in your project.
Can not found “common.charts.RadarChartSeriesEvent:” in swc.which Wrong？
flex2007´s last blog – 我的域名会不会被和谐掉
Hi
i used radar_chart-1.2.swc. to create spider chart with 8 sides..
i dont want to display series points on the line like 0 1 2 3 4 ….
i want clean line apart from that i need to create a fencing for my spiderchat
How can i acive that functionality…
Please let me know
Regards
Mahesh
Hi Mahesh,
There is no way to achieve turning off the labels using the swc file. However, it wouldn’t be difficult to implement if you download the original source code from http://github.com/boost/radar-chart and modify it to switch off the labels (see function updateAxis on line 330 of RadarChart.as).
If you wanted to contribute this change back to the project the easiest way would be to create a free github account and fork the project.
Hi, I have many problems…
I’ve tried with this example in a flex project importing to the project this project (http://github.com/boost/radar-chart):
and into my application it show a dark rectangle, nothing more.
I don’t know which is the problem. Maybe Flex’s version…
Thanks in advance!
Hi,
I haven’t tested the chart in Flex 4, only Flex 3. What version are you using?
Jeremy
Hi,
Yes, I have tested this chart in flex4, but error occurred.
I think when flex 4 sdk complile and running the app, the problem occur.
error message looks like
TypeError: Error #1009: null …
at boost.charts::RadarChart/drawSerie()[C:\AES_FRAMEWORK\workspace\Test01\src\boost\charts\RadarChart.as:648]
How can I solution this problem?
Hi, the problem you’re having looks like it has to do with the array of colours provided to the chart.
By default only 8 colours are available, so if you are adding more than 8 series you may get an error.
You may also get an error if you have supplied a different set of colours.
This solution would be to add a style tag to your applications main mxml file, making sure you specify enough colours for your series:
RadarChart {
colors: #257BB6, #B7247C, #CCC012, #41C04F, #296997, #26B69B, #CF5F0B, #A041C1;
}
There is an update available that addresses the Flex 4 issues. Please check the updates section at the end of the post, or the github page for this project at http://github.com/boost/radar-chart
Jeremy
hi, I have a problem, how to change the bgcolor of radarchart? I want to the color is #FFFFFF.thank you!