<?xml version="1.0" encoding="utf-8"?>
<!--

////////////////////////////////////////////////////////////////////////////////
//
//    Copyright 2014 Ardisia Labs LLC. All Rights Reserved.
//
//    This file is licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////

-->
<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)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            import spark.events.IndexChangeEvent;
            
            import ardisia.charts.radar.data.RadarAxis;
            import ardisia.charts.radar.data.RadarSeries;
            
            //--------------------------------------
            //  variables
            //--------------------------------------
            
            [Bindable]protected var dp:ArrayCollection;
            
            protected var minMax:Array;
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, viewstack_changeHandler);
                
                var selIndex:Vector.<int> = new Vector.<int>();
                
                // setup the dataProvider
                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});
                }
                
                // calculate global min/max to display min/max for all series items
                // even if only a few are displayed at the same time
                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";
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            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>
    
    <!-- declarations -->
    <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>
    
    <!-- states -->
    <s:states>
        <s:State name="stockholm" />
        <s:State name="london" />
        <s:State name="spark" />
    </s:states>
    
    <!-- application -->
    <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.&#13;&#13;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.&#13;&#13;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.&#13;&#13;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.&#13;&#13;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>