<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:radar="ardisia.charts.radar.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:rotaryField="ardisia.components.rotaryField.*"
xmlns:colorPicker="ardisia.components.colorPicker.*"
xmlns:data1="ardisia.charts.radar.data.*"
xmlns:legend="ardisia.charts.legend.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import spark.events.IndexChangeEvent;
import ardisia.charts.radar.data.RadarAxis;
import ardisia.charts.radar.data.RadarSeries;
[Bindable]protected var dp:ArrayCollection;
protected var minMax:Array;
public function creationComplete():void
{
demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, viewstack_changeHandler);
var selIndex:Vector.<int> = new Vector.<int>();
dp = new ArrayCollection();
for each (var item:XML in xml.Nation)
{
var name:String = item["@name"];
var population:String = item["@population"];
var GDP_Nominal:String = item["@GDP_Nominal"];
var Area:String = item["@Area"];
var LifeExpectancy:String = item["@LifeExpectancy"];
var OilReserves:String = item["@OilReserves"];
var Market_Cap:String = item["@Market_Cap"];
var GDP_Per_Capita:String = item["@GDP_Per_Capita"];
var InternetUsers:String = item["@InternetUsers"];
var NuclearElectricty:String = item["@NuclearElectricty"];
var AdultObesity:String = item["@AdultObesity"];
var Dogs:String = item["@Dogs"];
dp.addItem({
name:name,
population: population,
GDP_Nominal: GDP_Nominal,
Area:Area,
LifeExpectancy:LifeExpectancy,
OilReserves:OilReserves,
Market_Cap:Market_Cap,
GDP_Per_Capita:GDP_Per_Capita,
InternetUsers:InternetUsers,
NuclearElectricty:NuclearElectricty,
AdultObesity:AdultObesity,
Dogs:Dogs});
}
minMax = [
[Number.MAX_VALUE, Number.MIN_VALUE], [Number.MAX_VALUE, Number.MIN_VALUE],
[Number.MAX_VALUE, Number.MIN_VALUE], [Number.MAX_VALUE, Number.MIN_VALUE],
[Number.MAX_VALUE, Number.MIN_VALUE], [Number.MAX_VALUE, Number.MIN_VALUE],
[Number.MAX_VALUE, Number.MIN_VALUE], [Number.MAX_VALUE, Number.MIN_VALUE],
[Number.MAX_VALUE, Number.MIN_VALUE], [Number.MAX_VALUE, Number.MIN_VALUE],
[Number.MAX_VALUE, Number.MIN_VALUE] ];
for (var i:int = 0; i < dp.length; i++)
{
var dataItem:Object = dp[i];
var pop:Number = dataItem.population; minMax[0][0] = 0; minMax[0][1] = Math.max(pop, minMax[0][1]);
var gdp:Number = dataItem.GDP_Nominal; minMax[1][0] = Math.min(gdp, minMax[1][0]); minMax[1][1] = Math.max(gdp, minMax[1][1]);
var areaNation:Number = dataItem.Area; minMax[2][0] = Math.min(areaNation, minMax[2][0]); minMax[2][1] = Math.max(areaNation, minMax[2][1]);
var le:Number = dataItem.LifeExpectancy; minMax[3][0] = Math.min(le, minMax[3][0]); minMax[3][1] = Math.max(le, minMax[3][1]);
var oil:Number = dataItem.OilReserves; minMax[4][0] = Math.min(oil, minMax[4][0]); minMax[4][1] = Math.max(oil, minMax[4][1]);
var mc:Number = dataItem.Market_Cap; minMax[5][0] = Math.min(mc, minMax[5][0]); minMax[5][1] = Math.max(mc, minMax[5][1]);
var ppp:Number = dataItem.GDP_Per_Capita; minMax[6][0] = Math.min(ppp, minMax[6][0]); minMax[6][1] = Math.max(ppp, minMax[6][1]);
var iu:Number = dataItem.InternetUsers; minMax[7][0] = Math.min(iu, minMax[7][0]); minMax[7][1] = Math.max(iu, minMax[7][1]);
var ne:Number = dataItem.NuclearElectricty; minMax[8][0] = Math.min(ne, minMax[8][0]); minMax[8][1] = Math.max(ne, minMax[8][1]);
var ao:Number = dataItem.AdultObesity; minMax[9][0] = Math.min(ao, minMax[9][0]); minMax[9][1] = Math.max(ao, minMax[9][1]);
var dogss:Number = dataItem.Dogs; minMax[10][0] = Math.min(dogss, minMax[10][0]); minMax[10][1] = Math.max(dogss, minMax[10][1]);
}
for (i = 0; i < minMax.length; i++)
{
radar.radialAxes[i].min = 0;
radar.radialAxes[i].max = minMax[i][1];
}
var vec:* = radar.radialAxes;
radar.radialAxes = null;
radar.radialAxes = vec;
}
protected function autoCalculateMinMax(event:Event):void
{
if (minMaxSelect.selected)
{
for each (var cat:RadarAxis in radar.radialAxes)
{
cat.min = cat.max = NaN;
}
var vec:* = radar.radialAxes;
radar.radialAxes = null;
radar.radialAxes = vec;
}
else
{
for (var i:int = 0; i < minMax.length; i++)
{
radar.radialAxes[i].min = 0;
radar.radialAxes[i].max = minMax[i][1];
}
vec = radar.radialAxes;
radar.radialAxes = null;
radar.radialAxes = vec;
}
}
protected function colorFn(value:RadarSeries):uint
{
var frac:Number = radar.series.indexOf(value) /
(radar.series.length - 1);
return (256 * 256 * 256 * frac);
}
protected function intervalFormatFn(value:Number):String
{
return String(value) + " ADDED BY FORMAT FUNCTION";
}
protected function viewstack_changeHandler(event:IndexChangeEvent):void
{
if (demoAppWrapper.viewstack.selectedIndex == 0)
{
demoAppWrapper.expandingContainer1.open = demoAppWrapper.expandingContainer1.enabled = true;
}
else
{
demoAppWrapper.expandingContainer1.open = demoAppWrapper.expandingContainer1.enabled = false;
}
}
protected function removedFromStageHandler(event:Event):void
{
}
]]>
</fx:Script>
<fx:Declarations>
<fx:XML id="xml"
source="data/NationData.xml"/>
<s:XMLListCollection id="companyData">
<fx:XMLList>
<company name="Google" revenue="59.8" profit="12.9" employees="52069"/>
<company name="IBM" revenue="99.8" profit="19.5" employees="431500"/>
<company name="Facebook" revenue="7.9" profit="2.8" employees="7200"/>
<company name="SAP" revenue="22.36" profit="6" employees="66500"/>
<company name="Microsoft" revenue="77.9" profit="26.8" employees="128000"/>
<company name="Apple" revenue="171" profit="49" employees="98000"/>
</fx:XMLList>
</s:XMLListCollection>
<s:XMLListCollection id="collegesData">
<fx:XMLList>
<college name="Princeton" admissions="7.3" enrollment="7592" endowment="18.2" yearFounded="1746"/>
<college name="Yale" admissions="6.3" enrollment="11666" endowment="20.8" yearFounded="1701"/>
<college name="Harvard" admissions="5.9" enrollment="21225" endowment="32.3" yearFounded="1636"/>
<college name="Cornell" admissions="14" enrollment="20633" endowment="5.3" yearFounded="1865"/>
<college name="Penn" admissions="9.9" enrollment="20643" endowment="7.7" yearFounded="1740"/>
<college name="Dartmouth" admissions="11.5" enrollment="6141" endowment="3.7" yearFounded="1769"/>
<college name="Brown" admissions="8.6" enrollment="8649" endowment="2.7" yearFounded="1764"/>
<college name="Columbia" admissions="6.9" enrollment="22920" endowment="8.2" yearFounded="1754"/>
</fx:XMLList>
</s:XMLListCollection>
</fx:Declarations>
<s:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</s:states>
<containers:DemoApplicationWrapper id="demoAppWrapper"
width="100%" height="100%"
westRegionTitle="Radar Chart Description"
description="Radar Chart. Also known as a polar or spider chart, or a kiviat diagram."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>API</data:label>
<data:content>
<s:FormItem label="Display DataTip:">
<s:CheckBox id="showDataTipSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="Hide Delay:">
<s:HSlider enabled="{showDataTipSelect.selected}"
id="dataTipHideDelaySelect"
width="100"
minimum="0" maximum="1000" snapInterval="0" value="350"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Delay before removing datatip after mousing out of an item renderer."/>
</s:helpContent>
</s:FormItem>
<s:FormItem enabled="{showDataTipSelect.selected}"
label="Hover Radius:">
<s:HSlider id="nodeHoverThresholdSelect"
width="100"
minimum="1" maximum="20" snapInterval="1" value="12"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The number of pixels within a data point that displays the data tip."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Display Markers:">
<s:CheckBox id="showMarkersSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{showMarkersSelect.selected}"
label="Marker Radius:">
<s:HSlider id="markerRadiusSelect"
width="100"
minimum="0" maximum="10" snapInterval="1" value="5"/>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Animations"/>
<s:FormItem label="Fade Alpha:">
<s:HSlider id="highlightAlphaSelect"
width="100"
minimum="0" maximum="1" snapInterval="0" value="0.15"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="When data is hovered, the alpha to apply to all series renderers that are not hovered."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Fade Duration:">
<s:HSlider id="highlightDurationSelect"
width="100"
minimum="0" maximum="1000" snapInterval="0" value="250"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Duration of the fade animation when the 'hoverFadeAlpha' property is applied. Set to 0 to skip the animation."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Layout"/>
<s:FormItem label="Angle Offset:">
<rotaryField:RotaryField id="angleOffsetSelect"
width="50"
angleOffset="0"
value="270"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The offset for the angle of the initial axis from 0 degrees. 0 degrees for the Flash Player is the positive direction along the x axis. Put another way, 0 degrees is the direction your thumb points when you put your left hand against the screen and form an L shape with your fingers pointing straight up towards the ceiling. Put even another way, in the cardinal direction system, 0 degrees would be due East."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Inner Indent:">
<s:HSlider id="innerIndentSelect"
width="100"
minimum="0" maximum="100" value="35"/>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Intervals"/>
<s:FormItem label="Auto Min/Max:">
<s:CheckBox id="minMaxSelect"
selected="false"
change="autoCalculateMinMax(event)"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to calculate min/max based on displayed data. False to set the min/max explicitly from zero to the maximum for all series, even series that are not currently displayed."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Stroke Color:">
<colorPicker:ColorPicker id="intervalsStrokeColorSelect"
selectedColor="#BBCCDD"/>
</s:FormItem>
<s:FormItem label="Stroke Alpha:">
<s:HSlider id="intervalsStrokeAlphaSelect"
width="100"
minimum="0" maximum="1" snapInterval="0" value="1"/>
</s:FormItem>
<s:FormItem label="Stroke Weight:">
<s:HSlider id="intervalsStrokeThicknessSelect"
width="100"
minimum="0" maximum="10" snapInterval="1" value="2"/>
</s:FormItem>
<s:FormItem label="Count:">
<s:HSlider id="numberOfIntervalsSelect"
width="100"
minimum="0" maximum="10" snapInterval="1" value="3"/>
</s:FormItem>
<s:FormItem label="Display Labels:">
<s:CheckBox id="displayIntervalLabelsSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{displayIntervalLabelsSelect.selected}"
label="Use Format Fn:">
<s:CheckBox id="intervalsFormatFunctionSelect"
selected="false"
change="radar.intervalsFormatFunction=intervalsFormatFunctionSelect.selected ? intervalFormatFn : null;labelPrecisionFormItem.enabled=!intervalsFormatFunctionSelect.selected"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="User provided function that formats the string displayed by the axis interval labels. The function takes a float as an argument and returns a formatted String."/>
</s:helpContent>
</s:FormItem>
<s:FormItem id="labelPrecisionFormItem"
enabled="{displayIntervalLabelsSelect.selected}"
label="Label Precision:">
<s:HSlider id="intervalsPrecisionSelect"
width="100"
minimum="0" maximum="10" snapInterval="1" value="2"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Number of decimal places to use for the axis interval values text. Ignored if the 'intervalsFormatFunction' property is set."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Radial Axes"/>
<s:FormItem label="Stroke Color:">
<colorPicker:ColorPicker id="radialAxisStrokeColorSelect"
selectedColor="#BBCCDD"/>
</s:FormItem>
<s:FormItem label="Stroke Alpha:">
<s:HSlider id="radialAxisStrokeAlphaSelect"
width="100"
minimum="0" maximum="1" snapInterval="0" value="1"/>
</s:FormItem>
<s:FormItem label="Stroke Weight:">
<s:HSlider id="radialAxisStrokeThicknessSelect"
width="100"
minimum="0" maximum="10" snapInterval="1" value="6"/>
</s:FormItem>
<s:FormItem label="Display Labels:">
<s:CheckBox id="displayRadialAxisLabelsSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="Arrow Slope:">
<s:HSlider id="arrowSlopeSelect"
width="100"
minimum="0" maximum="90" snapInterval="1" value="30"/>
</s:FormItem>
<s:FormItem label="Arrow Length:">
<s:HSlider id="arrowHeadLengthSelect"
width="100"
minimum="0" maximum="20" snapInterval="1" value="6"/>
</s:FormItem>
<s:FormItem label="Label Offset:">
<s:HSlider id="radialAxisLabelsOffsetSelect"
width="100"
minimum="0" maximum="100" snapInterval="1" value="35"/>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Series Renderers"/>
<s:FormItem label="Stroke Weight:">
<s:HSlider id="seriesStrokeThicknessSelect"
width="100"
minimum="0" maximum="10" snapInterval="1" value="3"/>
</s:FormItem>
<s:FormItem label="Stroke Alpha:">
<s:HSlider id="seriesStrokeAlphaSelect"
width="100"
minimum="0" maximum="1" snapInterval="0" value="1"/>
</s:FormItem>
<s:FormItem label="Fill Alpha:">
<s:HSlider id="seriesFillAlphaSelect"
width="100"
minimum="0" maximum="1" snapInterval="0" value="0.1"/>
</s:FormItem>
<s:FormItem label="Form:">
<s:DropDownList id="formSelect"
width="100"
selectedIndex="0">
<s:dataProvider>
<s:ArrayCollection>
<fx:String>segment</fx:String>
<fx:String>curve</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:DropDownList>
</s:FormItem>
<s:FormItem label="Use Color Fn:">
<s:CheckBox id="colorFunctionSelect"
selected="false"
change="radar.colorFormatFunction=colorFunctionSelect.selected ? colorFn : null;dp.refresh();"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="User provided function that returns the color for the series when passed the series data object. Example uses a very simple color function that returns a gray shade depending on the series position in the dataProvider."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Overlay"/>
<s:FormItem label="Even Color:">
<colorPicker:ColorPicker id="quandrantAlternatingColorsSelectA"
selectedColor="#FFFFFF"/>
</s:FormItem>
<s:FormItem label="Even Alpha:">
<s:HSlider id="quandrantAlternatingAlphaSelectA"
width="100"
minimum="0" maximum="1" snapInterval="0" value="0.1"/>
</s:FormItem>
<s:FormItem label="Odd Color:">
<colorPicker:ColorPicker id="quandrantAlternatingColorsSelectB"
selectedColor="#999999"/>
</s:FormItem>
<s:FormItem label="Odd Alpha:">
<s:HSlider id="quandrantAlternatingAlphaSelectB"
width="100"
minimum="0" maximum="1" snapInterval="0" value="0.1"/>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Legend:"/>
<s:FormItem label="Trigger Hover:">
<s:CheckBox id="enableHoverTriggerSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True if hovering over a renderer will trigger a hover effect over the relevant series in the Chart."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Deselection:">
<s:CheckBox id="allowDeselectionSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True if users can remove series from the associated chart by toggling items in the legend"/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Nation Example</data:tabLabel>
<data:exampleDescription>Compare several nations on many different metrics.</data:exampleDescription>
<data:primaryContent>
<s:HGroup top="20" right="20" bottom="20" left="20">
<radar:Radar id="radar"
width="100%" height="100%"
horizontalCenter="0" verticalCenter="0"
dataProvider="{dp}"
intervalsStrokeColor="{intervalsStrokeColorSelect.selectedColor}"
intervalsStrokeAlpha="{intervalsStrokeAlphaSelect.value}"
intervalsStrokeThickness="{intervalsStrokeThicknessSelect.value}"
numberOfIntervals="{numberOfIntervalsSelect.value}"
displayIntervalLabels="{displayIntervalLabelsSelect.selected}"
intervalsPrecision="{intervalsPrecisionSelect.value}"
radialAxisStrokeColor="{radialAxisStrokeColorSelect.selectedColor}"
radialAxisStrokeAlpha="{radialAxisStrokeAlphaSelect.value}"
radialAxisStrokeThickness="{radialAxisStrokeThicknessSelect.value}"
displayRadialAxisLabels="{displayRadialAxisLabelsSelect.selected}"
arrowSlope="{arrowSlopeSelect.value}"
arrowHeadLength="{arrowHeadLengthSelect.value}"
radialAxisLabelsOffset="{radialAxisLabelsOffsetSelect.value}"
quandrantAlternatingColors="{[quandrantAlternatingColorsSelectA.selectedColor, quandrantAlternatingColorsSelectB.selectedColor]}"
quandrantAlternatingAlpha="{[quandrantAlternatingAlphaSelectA.value, quandrantAlternatingAlphaSelectB.value]}"
angleOffset="{angleOffsetSelect.value}"
innerIndent="{innerIndentSelect.value}"
seriesStrokeThickness="{seriesStrokeThicknessSelect.value}"
seriesStrokeAlpha="{seriesStrokeAlphaSelect.value}"
seriesFillAlpha="{seriesFillAlphaSelect.value}"
form="{formSelect.selectedItem}"
showDataTip="{showDataTipSelect.selected}"
dataTipHideDelay="{dataTipHideDelaySelect.value}"
nodeHoverThreshold="{nodeHoverThresholdSelect.value}"
showMarkers="{showMarkersSelect.selected}"
markerRadius="{markerRadiusSelect.value}"
highlightAlpha="{highlightAlphaSelect.value}"
highlightDuration="{highlightDurationSelect.value}">
<radar:radialAxes>
<data1:RadarAxis categoryField="population" displayName="Population"/>
<data1:RadarAxis categoryField="GDP_Nominal" displayName="GDP (Nominal)"/>
<data1:RadarAxis categoryField="Area" displayName="Area"/>
<data1:RadarAxis categoryField="LifeExpectancy" displayName="Life Expectancy" min="50" max="100"/>
<data1:RadarAxis categoryField="OilReserves" displayName="Oil Reserves"/>
<data1:RadarAxis categoryField="Market_Cap" displayName="Total Market Capitalization"/>
<data1:RadarAxis categoryField="GDP_Per_Capita" displayName="GDP Per Capita (PPP)"/>
<data1:RadarAxis categoryField="InternetUsers" displayName="Total Internet Users"/>
<data1:RadarAxis categoryField="NuclearElectricty" displayName="Nuclear Power Production"/>
<data1:RadarAxis categoryField="AdultObesity" displayName="Adult Obesity Rate"/>
<data1:RadarAxis categoryField="Dogs" displayName="Pet Dog Population"/>
</radar:radialAxes>
<radar:series>
<data1:RadarSeries field="name" fieldValue="United States" displayName="USA"/>
<data1:RadarSeries field="name" fieldValue="Japan" displayName="Japan"/>
<data1:RadarSeries field="name" fieldValue="China" displayName="China"/>
<data1:RadarSeries field="name" fieldValue="Germany" displayName="Germany"/>
<data1:RadarSeries field="name" fieldValue="Mali" displayName="Mail"/>
<data1:RadarSeries field="name" fieldValue="Russia" displayName="Russia"/>
<data1:RadarSeries field="name" fieldValue="India" displayName="India"/>
<data1:RadarSeries field="name" fieldValue="United Kingdom" displayName="UK"/>
<data1:RadarSeries field="name" fieldValue="Saudi Arabia" displayName="Saudi Arabia"/>
<data1:RadarSeries field="name" fieldValue="France" displayName="France"/>
<data1:RadarSeries field="name" fieldValue="Liechtenstein" displayName="Liechtenstein"/>
<data1:RadarSeries field="name" fieldValue="American Samoa" displayName="American Samoa"/>
<data1:RadarSeries field="name" fieldValue="Brazil" displayName="Brazil"/>
<data1:RadarSeries field="name" fieldValue="Italy" displayName="Italy"/>
<data1:RadarSeries field="name" fieldValue="Canada" displayName="Canada"/>
<data1:RadarSeries field="name" fieldValue="Poland" displayName="Poland"/>
</radar:series>
</radar:Radar>
<legend:Legend chart="{radar}"
allowDeselection="{allowDeselectionSelect.selected}"
enableHoverTrigger="{enableHoverTriggerSelect.selected}"/>
</s:HGroup>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Miscellaneous Examples</data:tabLabel>
<data:exampleDescription>Various examples.</data:exampleDescription>
<data:primaryContent>
<s:HGroup right="20" left="20"
verticalCenter="0"
verticalAlign="middle" horizontalAlign="center"
gap="20">
<s:VGroup width="100%" height="100%"
horizontalAlign="center" verticalAlign="middle"
gap="20">
<s:Label text="Selected Tech Companies"
fontWeight="bold"/>
<s:VGroup width="100%" height="100%"
gap="20"
horizontalAlign="center">
<radar:Radar id="companyChart"
height="500" width="100%"
dataProvider="{companyData}"
quandrantAlternatingAlpha="{[0, }"
intervalsStrokeThickness="1"
seriesStrokeThickness="2" seriesStrokeAlpha="1" seriesFillAlpha="0"
radialAxisStrokeThickness="1"
showMarkers="true"
markerRadius="4"
highlightAlpha="0.35"
displayIntervalLabels="false"
innerIndent="10"
nodeHoverThreshold="4">
<radar:radialAxes>
<data1:RadarAxis categoryField="@revenue" displayName="Sales"/>
<data1:RadarAxis categoryField="@profit" displayName="Profit"/>
<data1:RadarAxis categoryField="@employees" displayName="Employees"/>
</radar:radialAxes>
<radar:series>
<data1:RadarSeries field="@name" fieldValue="Facebook" displayName="Facebook"/>
<data1:RadarSeries field="@name" fieldValue="Apple" displayName="Apple"/>
<data1:RadarSeries field="@name" fieldValue="IBM" displayName="IBM"/>
<data1:RadarSeries field="@name" fieldValue="SAP" displayName="SAP"/>
<data1:RadarSeries field="@name" fieldValue="Microsoft" displayName="Microsoft"/>
<data1:RadarSeries field="@name" fieldValue="Google" displayName="Google"/>
</radar:series>
</radar:Radar>
<legend:Legend chart="{companyChart}">
<legend:layout>
<s:TileLayout requestedColumnCount="3"
horizontalGap="0" verticalGap="0" />
</legend:layout>
</legend:Legend>
</s:VGroup>
</s:VGroup>
<separators:VSeparator height="100%"/>
<s:VGroup width="100%" height="100%"
horizontalAlign="center" verticalAlign="middle"
gap="20">
<s:Label text="Ivy League Universities"
fontWeight="bold"/>
<s:HGroup width="100%" height="100%"
gap="20"
verticalAlign="middle">
<radar:Radar id="collegeChart"
height="500" width="100%"
dataProvider="{collegesData}"
quandrantAlternatingAlpha="{[0, }"
intervalsStrokeThickness="1"
seriesStrokeThickness="3" seriesStrokeAlpha="1" seriesFillAlpha="0"
radialAxisStrokeThickness="1"
showMarkers="true"
markerRadius="3"
highlightDuration="150" highlightAlpha="0.25"
dataTipHideDelay="150"
displayIntervalLabels="true"
innerIndent="20"
numberOfIntervals="0"
nodeHoverThreshold="4">
<radar:radialAxes>
<data1:RadarAxis categoryField="@admissions" displayName="Acceptance %"/>
<data1:RadarAxis categoryField="@enrollment" displayName="Enrollment"/>
<data1:RadarAxis categoryField="@endowment" displayName="Endowment ($ billions)"/>
<data1:RadarAxis categoryField="@yearFounded" displayName="Founded"/>
</radar:radialAxes>
<radar:series>
<data1:RadarSeries field="@name" fieldValue="Princeton" displayName="Princeton"/>
<data1:RadarSeries field="@name" fieldValue="Yale" displayName="Yale"/>
<data1:RadarSeries field="@name" fieldValue="Harvard" displayName="Harvard"/>
<data1:RadarSeries field="@name" fieldValue="Cornell" displayName="Cornell"/>
<data1:RadarSeries field="@name" fieldValue="Penn" displayName="Penn"/>
<data1:RadarSeries field="@name" fieldValue="Dartmouth" displayName="Dartmouth"/>
<data1:RadarSeries field="@name" fieldValue="Brown" displayName="Brown"/>
<data1:RadarSeries field="@name" fieldValue="Columbia" displayName="Columbia"/>
</radar:series>
</radar:Radar>
<legend:Legend chart="{collegeChart}">
<legend:layout>
<s:VerticalLayout />
</legend:layout>
</legend:Legend>
</s:HGroup>
</s:VGroup>
</s:HGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>