Radar Chart, known as a Kiviat Chart or a Spider Chart, is a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point. This control is usually used to compare performance.
Radar Chart is a ready-to-use Flex component that can be easily integrated in any Flex or Air application to provide a powerful data analysis tool and can be parameterized using a large set of properties.
RadarChart is designed to handle any type of data using an internal data parsing model which enables advanced interpretation of any input data via reconstruction options that can applied on CSV files and ICollectionView instances.
Like other Kap Lab components, RadarChart handles the following data input:
ICollectionView instances including XML, ArrayCollection...;
Objects with children property or with a custom TreeDataDescriptor;
CSV files.
ICollectionView data
An ICollectionView is a view onto a collection of data. All Classes implementing the ICollectionView interface (XML, XMLListCollection, ArrayCollection) are handled in the same way by the component.
seriesField property is required so that Radar Chart makes distinction between the different series. In case XML seriesField takes the name of the attribute having the name of the serie as value and in case of ArrayCollection It will be the property. The name of the series must be different.
In the following example, we use an XML file to display a large hierarchical collection of quantitative data.
CSV Files are organized in rows and columns using a CSV delimiter. A data field has a row index and column index, generally described in a String format while it can represent a Date, a Number or other content. RadarChart handles CSV parsing, reconstruction and data content interpretation via a set of options. In this part we will show how RadarChart handles CSV content visualization.
filterPath property must be set so that Radar Chart could reconstruct the CSV file in order to display it. filterPath takes as value the name of the column containing the names of the different series.
Radar Chart provides some extra optional properties to provide advanced CSV data input parsing. These properties and methods are the following:
filterPath : used to extract needed data from the CSV file;
csvDelimiter : used to indicate the delimiter of the CSV file(by default it is set to ";")
withHeaders : used to indicate if the first row should be considered as column headers (by default is set to true);
recordDelimiter : used to indicates the delimiter of a field (if it exists). It is generally used when data field content contains CSVDelimiter string as in such situations CSV parsing produces wrong results. By default, the recordDelimiter property is "" and can be modified when needed.
reportingFunction: used to transform the data fields arrays into a real data by applying standard or custom functions.
It is advised to visit the Components Data Input section of all Kap Lab components to get more details about the data parsing properties and functions.
CSV File Integration Sample
CSV Data Source
name;continent;region;population;area;growth
Albania;22;234;28750;3249136;56
Greece;49;342;131940;2104035;32
Macedonia;90;654;25333;2104035;3
Serbia and Montenegro;87;212;102350;10614558;20
Andorra;90;1234;450;72766;12
MXML Application
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#FFFFFF" layout="absolute" xmlns:radarchart="fr.kapit.radarchart.*" creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
[Embed(source="CSV.txt",mimeType="application/octet-stream")]
privatevar CSV:Class;
private function onCreationComplete():void
{
var byteArray:ByteArray = new CSV() as ByteArray;
var content:Object=byteArray.readUTFBytes(byteArray.length);
myRadarChart.dataProvider = String(content);
}
]]>
</mx:Script>
<radarchart:RadarChart id="myRadarChart"
filterPath="{['name']}"
csvDelimiter=";"
withHeaders="true"
width="100%"
height="100%" />
</mx:Application>
Objects with children property or with customTreeDataDescriptor
In some applications, it can be interesting to display the content of internal data structures like in case of administration or introspection application. RadarChart allows such functionality, as the developper should only give the reference to its object instance and a custom Tree Data Descriptor (via the treeDataDescriptor property) allowing custom navigation inside the object (only if it doesn't have the children property).
The options used for ICollectionView instance described previously can be applied to this kind of data format.
The radarChartSeries are used to specify the chart series that the RadarChart Control should use to define the data for the chart. RadarChart provides some properties to customize the series control :
Property
Description
name
Specifies the name of the seriesField that determines the dataprovider entry to use. This is a mandatory property : you have to specify the name of each series so that the RadarChart can find to which line in the dataProvider it corresponds.
label
Specifies the name of the series displayed in the legend
color
Specifies the series color
The following example creates a simple RadarChart using the series controls:
By default, the RadarChart extracts all the axes from the dataProvider. However, it is possible to choose which axes to include using the axes property that can be customized through the following properties :
Property
Description
name
Specifies the field that apply to the axe in the dataprovider
label
Specifies the name of the series displayed in the axe
max
Specifies the maximal graduation shown on the axe
min
Specifies the minimal graduation shown on the axe
The following example creates a RadarChart control with customized axes :
In this section we will describe the different properties and features provided by RadarChart in order to let the developer customize his application.
seriesField : used to specify the field used to determine the series (default is 'name')
divisions : used to specify the number of divisions on the axes
color : used to specify the series color
showGrid : used to specify grid's visibility
showAxes : used to specifies axes' visibility
selectedSeries : this property takes an Array of RadarChartSeries objects. The objects in the array will be visible in the Radar Chart and in the RadarChart Legend the other objects that are not specified in this Array will be in gray. |
To see all the properties available for RadarChart please refer to the ASDoc.
