RadarChart

From Openzet

Contents 1 Introduction  2 Property  2.1 angularAxisRenderer:IRadarAxisRenderer 2.2 computedGutters:Rectangle 2.3 radialAxisRenderer:IRadarAxisRenderer 3 Usage 4 Application Example

Introduction 

RadarChart is a custom chart control to display data, such as a person/group's tendency data, distributed radially.
This chart control can enhance users' visual experience by displaying data radially, which featue is not natively supported by Flex framework.

Property 

angularAxisRenderer:IRadarAxisRenderer

Custom renderer class to represent RadarChart's angularAxis. By default, this chart control uses AngularAxisRenderer and you cannot use normal AxisRenderer for this chart. 

computedGutters:Rectangle

Read-only property to represent currently computed gutter size.

radialAxisRenderer:IRadarAxisRenderer

Custom renderer class to represent radialAxis of a RadarChart control.  By default, this chart control uses RadialAxisRenderer and you cannot use normal AxisRenderer for this chart. 

Usage

Basic usage of this chart is the same with normal Flex charts.

This class provides angularAxis and radialAxis properties, in place of horizontalAxis and verticalAxis properties.

<charts:angularAxis>
    <mx:CategoryAxis id="aAxis" categoryField="title"/>
</charts:angularAxis>
<charts:radialAxis>
    <mx:LinearAxis id="rAxis"/>
</charts:radialAxis>

For values of series property, you should use an array of RadarSeries instance(s).

<charts:series>
    <series:RadarSeries field="data1"/>
    <series:RadarSeries field="data2"/>
    <series:RadarSeries field="data3"/>
    <series:RadarSeries field="data4"/>
</charts:series>

For backgroundElements' property, this class uses RadarLines instead of GridLines, whose direction property can be  angular, radial or both. The default value of this property is both. 

<charts:backgroundElements>
 <charts:RadarLines direction="both"/>
</charts:backgroundElements>

Application Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            xmlns:openzet="http://www.openzet.org/2009/mxml"
            applicationComplete="initApp();"
            backgroundGradientColors="[0xFFFFFF, 0xFFFFFF]"
            layout="vertical" fontSize="12" xmlns:series="org.openzet.charts.series.*">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            private function initApp():void
            {
                chr.dataProvider = acData;
            }
 
            private var acData:ArrayCollection = new ArrayCollection( [
                        { title: "Title 1", data1:78, data2:67, data3:45, data4:25},
                        { title: "Title 2", data1:34, data2:78, data3:37, data4:44},
                        { title: "Title 3", data1:84, data2:35, data3:72, data4:23},
                        { title: "Title 4", data1:45, data2:70, data3:72, data4:23},
                        { title: "Title 5", data1:82, data2:75, data3:78, data4:89},
                        { title: "Title 6", data1:78, data2:57, data3:30, data4:27},
                        { title: "Title 7", data1:78, data2:47, data3:58, data4:73},
                        { title: "Title 8", data1:78, data2:87, data3:40, data4:62}
                        ]);
        ]]>
    </mx:Script>
 
    <mx:SeriesInterpolate id="eff" duration="2000"/>
 
    <mx:VBox width="100%" height="100%" horizontalAlign="center">
        <mx:Legend dataProvider="{chr}" direction="horizontal"/>
 
        <openzet:RadarChart id="chr" width="100%" height="100%" showDataTips="true" fontSize="12">
            <openzet:radialAxis>
                <mx:LinearAxis maximum="100" interval="20"/>
            </openzet:radialAxis>
 
            <openzet:angularAxisRenderer>
                <openzet:AngularAxisRenderer axis="{aAxis}" showLine="true"/>
            </openzet:angularAxisRenderer>
 
            <openzet:angularAxis>
                <mx:CategoryAxis id="aAxis" categoryField="title"/>
            </openzet:angularAxis>
 
            <openzet:backgroundElements>
                <openzet:RadarLines/>
            </openzet:backgroundElements>
            <openzet:series>
                <series:RadarSeries field="data1" showDataEffect="{eff}" displayName="Data 1"
                itemRenderer="mx.charts.renderers.CircleItemRenderer">
                </series:RadarSeries>
                <series:RadarSeries field="data2" showDataEffect="{eff}" displayName="Data 2"
                itemRenderer="mx.charts.renderers.CircleItemRenderer">
                </series:RadarSeries>
                <series:RadarSeries field="data3" showDataEffect="{eff}" displayName="Data 3"
                itemRenderer="mx.charts.renderers.CircleItemRenderer">
                </series:RadarSeries>
                <series:RadarSeries field="data4" showDataEffect="{eff}" displayName="Data 4"
                itemRenderer="mx.charts.renderers.CircleItemRenderer">
                </series:RadarSeries>
            </openzet:series>
        </openzet:RadarChart>
    </mx:VBox>
</mx:Application>