<?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:mx="library://ns.adobe.com/flex/mx"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:donut="ardisia.charts.donut.*"
xmlns:rotaryField="ardisia.components.rotaryField.*"
xmlns:data1="ardisia.charts.donut.data.*"
xmlns:legend="ardisia.charts.legend.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.core.UIComponent;
import spark.events.IndexChangeEvent;
import ardisia.utils.ColorUtils;
public function creationComplete():void
{
demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, viewstack_changeHandler);
}
protected function colorFn(value:Object):uint
{
var frac:Number = donutChart.dataProvider.getItemIndex(value) /
(donutChart.dataProvider.length - 1);
return ColorUtils.getColorBetweenColors(0x006B9F, 0xD2F0FF, frac);
}
protected function viewstack_changeHandler(event:IndexChangeEvent):void
{
if (demoAppWrapper.viewstack.selectedIndex == 0)
{
demoAppWrapper.expandingContainer1.enabled = true;
}
else
{
demoAppWrapper.expandingContainer1.enabled = false;
}
}
protected function filterFn(event:Event):void
{
var catFields:Vector.<DonutCategory> = new Vector.<DonutCategory>();
if (year1990.selected)
catFields.push(dc1);
if (year2000.selected)
catFields.push(dc2);
if (year2005.selected)
catFields.push(dc3);
if (year2013.selected)
catFields.push(dc4);
donutChart.categories = catFields;
}
protected function dataTipFormatFn(data:Object,
seriesColor:uint):Object
{
title.text = data.nation;
if (data.hasOwnProperty("year2013"))
{
cat1Title.text = "2013: ";
cat1Value.text = data.year2013 + " (" + Math.round(100 * data.year2013 / globalProduction.year2013) + "% World)";
cat1Title.setStyle("color", donutChart.categories[donutChart.hoveredCategoryIndex].displayName == "2013" ? 0xFF0000 : 0x000000);
}
else
{
cat1Title.text = cat1Value.text = null;
}
if (data.hasOwnProperty("year2005"))
{
cat2Title.text = "2005: ";
cat2Value.text = data.year2005 + " (" + Math.round(100 * data.year2005 / globalProduction.year2005) + "% World)";
cat2Title.setStyle("color", donutChart.categories[donutChart.hoveredCategoryIndex].displayName == "2005" ? 0xFF0000 : 0x000000);
}
else
{
cat2Title.text = cat2Value.text = null;
}
if (data.hasOwnProperty("year2000"))
{
cat3Title.text = "2000: ";
cat3Value.text = data.year2000 + " (" + Math.round(100 * data.year2000 / globalProduction.year2000) + "% World)";
cat3Title.setStyle("color", donutChart.categories[donutChart.hoveredCategoryIndex].displayName == "2000" ? 0xFF0000 : 0x000000);
}
else
{
cat3Title.text = cat3Value.text = null;
}
if (data.hasOwnProperty("year1990"))
{
cat4Title.text = "1990: ";
cat4Value.text = data.year1990 + " (" + Math.round(100 * data.year1990 / globalProduction.year1990) + "% World)";
cat4Title.setStyle("color", donutChart.categories[donutChart.hoveredCategoryIndex].displayName == "1990" ? 0xFF0000 : 0x000000);
}
else
{
cat4Title.text = cat4Value.text = null;
}
UIComponent(donutChart.dataTipInstance).setStyle("borderColor", seriesColor);
return tf;
}
protected function removedFromStageHandler(event:Event):void
{
}
]]>
</fx:Script>
<fx:Declarations>
<fx:Object id="globalProduction" year2013="87.7" year2005="66.5" year2000="58.4" year1990="48.6" />
<s:ArrayCollection id="dpMotorVehicleProduction">
<fx:Object nation="China" year2013="22.1" year2005="5.7" year2000="2.1" year1990="0.5" />
<fx:Object nation="USA" year2013="11.1" year2005="11.9" year2000="12.8" year1990="9.8" />
<fx:Object nation="Japan" year2013="9.6" year2005="10.8" year2000="10.1" year1990="13.5" />
<fx:Object nation="Germany" year2013="5.7" year2005="5.8" year2000="5.5" year1990="5.0" />
<fx:Object nation="South Korea" year2013="4.5" year2005="3.7" year2000="3.1" year1990="1.3" />
<fx:Object nation="India" year2013="3.9" year2005="1.6" year2000="0.8" year1990="0.4" />
<fx:Object nation="Brazil" year2013="3.7" year2005="2.5" year2000="1.7" year1990="0.9" />
<fx:Object nation="Mexico" year2013="3.1" year2005="1.6" year2000="1.9" year1990="0.8" />
<fx:Object nation="Thailand" year2013="2.5" year2005="1.1" year2000="0.3" year1990="0.3" />
<fx:Object nation="Canada" year2013="2.4" year2005="2.7" year2000="3.0" year1990="1.9" />
<fx:Object nation="Russia" year2013="2.2" year2005="1.4" year2000="1.2" year1990="1.1" />
<fx:Object nation="Spain" year2013="2.2" year2005="2.8" year2000="3.0" year1990="2.1" />
<fx:Object nation="France" year2013="1.7" year2005="3.5" year2000="3.3" year1990="3.8" />
<fx:Object nation="UK" year2013="1.6" year2005="1.8" year2000="1.8" year1990="1.6" />
<fx:Object nation="Indonesia" year2013="1.2" year2005="0.5" year2000="0.4" />
</s:ArrayCollection>
<s:ArrayCollection id="dpSMartphone">
<fx:Object os="Android" year2010="67" year2011="220" year2012="452" year2013="759" />
<fx:Object os="iOS" year2010="47" year2011="89" year2012="130" year2013="151" />
<fx:Object os="Windows Phone" year2010="12" year2011="9" year2012="17" year2013="31" />
<fx:Object os="BlackBerry" year2010="47" year2011="52" year2012="34" year2013="19" />
<fx:Object os="Symbian" year2010="112" year2011="93" />
</s:ArrayCollection>
<s:ArrayCollection id="dpBrowserMarketShare">
<fx:Object browser="IE" year2012="37" year2013="31" year2014="23" />
<fx:Object browser="Chrome" year2012="28" year2013="37" year2014="44" />
<fx:Object browser="Firefox" year2012="25" year2013="21" year2014="19" />
<fx:Object browser="Safari" year2012="7" year2013="8" year2014="10" />
<fx:Object browser="Opera" year2012="2" year2013="1" year2014="1" />
</s:ArrayCollection>
<s:TextFlow id="tf">
<s:p><s:span id="title" fontWeight="bold" fontSize="14"></s:span></s:p>
<s:br/><s:span id="cat1Title" fontWeight="bold" fontSize="13"></s:span> <s:span id="cat1Value" fontSize="13"></s:span>
<s:br/><s:span id="cat2Title" fontWeight="bold" fontSize="13"></s:span> <s:span id="cat2Value" fontSize="13"></s:span>
<s:br/><s:span id="cat3Title" fontWeight="bold" fontSize="13"></s:span> <s:span id="cat3Value" fontSize="13"></s:span>
<s:br/><s:span id="cat4Title" fontWeight="bold" fontSize="13"></s:span> <s:span id="cat4Value" fontSize="13"></s:span>
<s:br/><s:br/><s:span fontSize="10" fontStyle="italic">*All numbers are in millions of vehicles</s:span>
</s:TextFlow>
</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="Donut Chart Description"
description="Donut Chart. Capable of displaying multiple rings of data."
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="Custom Color Fn:">
<s:CheckBox id="colorFunctionSelect"
selected="false"
change="donutChart.colorFormatFunction=colorFunctionSelect.selected ? colorFn : null; ArrayCollection(donutChart.dataProvider).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 blue shade depending on the series position in the dataProvider."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Display Percents:">
<s:CheckBox id="showPercentagesSelect"
selected="false"/>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Series Labels"/>
<s:FormItem label="Display Labels:">
<s:CheckBox id="showSeriesLabelsSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{showSeriesLabelsSelect.selected}"
label="Layout Offset:">
<s:HSlider id="seriesLabelOffsetSelect"
width="100"
minimum="0" maximum="100" value="5"/>
</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="0"/>
<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 Radius:">
<s:HSlider id="innerRadiusSelect"
width="100"
minimum="0" maximum="100" value="50"/>
</s:FormItem>
<s:FormItem label="Ring Sep:">
<s:HSlider id="ringSeparationSelect"
width="100"
minimum="0" maximum="20" value="4"/>
</s:FormItem>
<s:FormItem label="Wedge Sep:">
<s:HSlider id="wedgeSeperationSelect"
width="100"
minimum="0" maximum="10" value="2"/>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Animations"/>
<s:FormItem label="Fade Alpha:">
<s:HSlider id="hoverFadeAlphaSelect"
width="100"
minimum="0" maximum="1" snapInterval="0" value="0.4"/>
<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="hoverFadeDurationSelect"
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="Data Tip:"/>
<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 data tip after mousing out of an item renderer."/>
</s:helpContent>
</s:FormItem>
<s:FormItem enabled="{showDataTipSelect.selected}"
label="Format Fn:">
<s:CheckBox id="dataTipFunctionSelect"
selected="true"
change="donutChart.dataTipFormatFunction=dataTipFunctionSelect.selected ? dataTipFormatFn : null; ArrayCollection(donutChart.dataProvider).refresh();"/>
<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>
<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>Motor Vehicle Production Example</data:tabLabel>
<data:exampleDescription>World Motor Vehicle Production.</data:exampleDescription>
<data:primaryContent>
<s:HGroup top="40" right="40" bottom="40" left="40"
horizontalAlign="center" verticalAlign="top"
gap="20">
<s:BorderContainer width="100%" height="100%">
<donut:Donut id="donutChart"
minWidth="300"
top="5" right="5" bottom="5" left="5"
seriesField="nation"
showSeriesLabels="{showSeriesLabelsSelect.selected}"
seriesLabelOffset="{seriesLabelOffsetSelect.value}"
dataProvider="{dpMotorVehicleProduction}"
wedgeSeperation="{wedgeSeperationSelect.value}"
ringSeparation="{ringSeparationSelect.value}"
innerRadius="{innerRadiusSelect.value}"
showPercentages="{showPercentagesSelect.selected}"
angleOffset="{angleOffsetSelect.value}"
showDataTip="{showDataTipSelect.selected}"
dataTipHideDelay="{dataTipHideDelaySelect.value}"
highlightAlpha="{hoverFadeAlphaSelect.value}"
highlightDuration="{hoverFadeDurationSelect.value}"
dataTipFormatFunction="dataTipFormatFn">
<donut:categories>
<data1:DonutCategory id="dc1" categoryField="year1990" displayName="1990" />
<data1:DonutCategory id="dc2" categoryField="year2000" displayName="2000" />
<data1:DonutCategory id="dc3" categoryField="year2005" displayName="2005" />
<data1:DonutCategory id="dc4" categoryField="year2013" displayName="2013" />
</donut:categories>
</donut:Donut>
</s:BorderContainer>
<s:VGroup>
<s:VGroup gap="0"
paddingLeft="4">
<s:Label text="Years To Chart"
fontWeight="bold"
paddingBottom="6" paddingLeft="-4"/>
<s:CheckBox id="year2013"
label="2013"
selected="true"
change="filterFn(event);"/>
<s:CheckBox id="year2005"
label="2005"
selected="true"
change="filterFn(event);"/>
<s:CheckBox id="year2000"
label="2000"
selected="true"
change="filterFn(event);"/>
<s:CheckBox id="year1990"
label="1990"
selected="true"
change="filterFn(event);"/>
</s:VGroup>
<separators:HSeparator width="100%"/>
<s:Label text="Legend"
fontWeight="bold"
paddingBottom="0" paddingLeft="0"/>
<legend:Legend chart="{donutChart}"
allowDeselection="{allowDeselectionSelect.selected}"
enableHoverTrigger="{enableHoverTriggerSelect.selected}"/>
</s:VGroup>
</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="40" left="40"
verticalCenter="0"
horizontalAlign="center" verticalAlign="contentJustify"
gap="50">
<s:VGroup horizontalAlign="left"
gap="20">
<s:Label text="Smartphone Operating System Market Share (2010 - 2013)"
fontWeight="bold"/>
<s:VGroup gap="20">
<donut:Donut id="osChart"
width="350" height="250"
ringSeparation="1"
wedgeSeperation="1"
seriesField="os"
highlightAlpha="0.9"
highlightDuration="0"
dataProvider="{dpSMartphone}">
<donut:categories>
<data1:DonutCategory categoryField="year2010" displayName="2010" />
<data1:DonutCategory categoryField="year2011" displayName="2011" />
<data1:DonutCategory categoryField="year2012" displayName="2012" />
<data1:DonutCategory categoryField="year2013" displayName="2013" />
</donut:categories>
</donut:Donut>
<legend:Legend chart="{osChart}">
<legend:layout>
<s:TileLayout requestedColumnCount="3"
horizontalGap="0" verticalGap="0" />
</legend:layout>
</legend:Legend>
</s:VGroup>
</s:VGroup>
<separators:VSeparator height="100%"/>
<s:VGroup horizontalAlign="left"
gap="20">
<s:Label text="Desktop Browser Market Share (2012 - 2014)"
fontWeight="bold"/>
<s:HGroup gap="20">
<donut:Donut id="browserChart"
width="350" height="250"
innerRadius="0"
ringSeparation="0"
wedgeSeperation="0"
highlightDuration="0"
highlightAlpha="1"
seriesField="browser"
dataProvider="{dpBrowserMarketShare}">
<donut:categories>
<data1:DonutCategory categoryField="year2012" displayName="2012" />
<data1:DonutCategory categoryField="year2013" displayName="2013" />
<data1:DonutCategory categoryField="year2014" displayName="2014" />
</donut:categories>
</donut:Donut>
<legend:Legend chart="{browserChart}"/>
</s:HGroup>
</s:VGroup>
</s:HGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>