EMAIL: info@ardisialabs.com
Contact envelope

Radar

Overview

Also known as a polar or spider chart, or a kiviat diagram.

Creating the Radar Chart Component

The Radar class extends the Ardisia ChartBase class so it can be added to containers that implement IVisualElementContainer.

Using the Radar Chart Component

The Radar chart works by defining data through the use of series and categories. A series is a collection of related data to display. For example, assume we are displaying data on nations, say France and Japan. France and Japan are each a series and on the Radar chart the series data are connected by strokes forming an n-sided polygon.

The categories define what particular data within a series are displayed along each axis. Assume that for our chart with France and Japan as the series, we are plotting their GDP and population. Therefore, GDP and population are each represented as categories along an axis and each will plot the respective GDP or population data from each series data object.

Category axes are defined with RadarAxis objects and series are defined using RadarSeries objects. Arrays of both define how the Radar Chart will display its dataProvider.

For the Radar chart, each set of series data is represented by a single object with the category values stored as properties of that object.

For example:

<s:ArrayCollection id="dp">
    <fx:Object name="France" GDP="1" population="1" />
    <fx:Object name="Japan" GDP="2" population="2" />
</s:ArrayCollection>

<radar:Radar dataProvider="{dp}">
    <radar:radialAxes>
        <data:RadarAxis categoryField="GDP" displayName="GDP"/>
        <data:RadarAxis categoryField="population" displayName="population"/>
    </radar:radialAxes>
    <radar:series>
        <data:RadarSeries field="name" fieldValue="France" displayName="France"/>
        <data:RadarSeries field="name" fieldValue="Japan" displayName="Japan"/>
    </radar:series>
</radar:Radar>	

In the example above, there are 2 series: France and Japan. The categories are GDP and population. On the RadarAxis objects, the "categoryField" defines what property on the series data object points to GDP for each set of series data. On The RadarSeries objects, the "field" and "fieldValue" define what object in the dataProvider provides the data for this particular series. E.G. the location of the series data in the dataProvider.

Intervals

Strokes can be drawn between axes with labels indicating the relative series values along the axes. You can control how many are created, whether to display a label for the series value, precision, etc. See the ASdocs.

Quadrant Overlays

The regions between axes can be filled with alternating colors and alphas.

See the "quandrantAlternatingColors" and "quandrantAlternatingAlpha" styles.

DataProvider

The RadarChart expects a collection. Each data object in the dataProvider should represent a set of series data referenced by the "field" and "fieldValue" properties on RadarSeries objects.

Item Renderers

The RadarSkin defines factories for many different types of item renderers used by the Radar component. The series data renderers must implement IRadarSeriesItemRenderer and the interval labels must implement IRadarIntervalItemRenderer.

See the ASDocs and the Radar skin for the skin part factories.

DataTip(s)

By default, a dataTip will display when the user hovers over series data points on the chart. If multiple data points are within range, a dataTip will be displayed for each. See the "dataTipFactoryPart" skin part to customize the tip.

Tooltips can be passed TextFlow objects for a highly customized appearance.

Set the "nodeHoverThreshold" property to control the number of pixels within a data point that triggers hover and displays the data tip.

The dataTip will persist for a time set by the "dataTipHideDelay" after users mouse out of data nodes.

Animations & Effects

Use the "HighlightAlpha" and "HighlightDuration" properties to control how renderers other than the hovered renderer are faded on highlight.

Legend

To automatically apply a legend, add an Ardisia Legend to the display and send the legend a reference to the radar chart.

<ardisia:Legend chart="{radarChart}">

In the example above, assuming that a chart with the ID "radarChart" has been created, a legend would be displayed that would automatically display the series for the chart.

See the ASDocs for the Legend for additonal properties and options.

Coloring

Series renderers are colorized by default.

Alternatively, you can supply a callback "colorFormatFunction" to supply custom colors to the series item renderers.

Layout

The Radar chart will automatically size itself to fill the allotted space.

Default Property

The dataProvider is the default property.

Selected Custom Styles

See the ASDocs for the Radar class. The number of styles is very numerous.

Themes & Skinning

A skin is provided for the Spark theme.

Example

See the Radar Chart demo application for example code.

Back To Top