<?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:legend="ardisia.charts.legend.*"
xmlns:funnel="ardisia.charts.funnel.*"
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 = funnelChart.store.indexOf(value) /
(funnelChart.store.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
{
}
protected function labelsFormatFunction(item:Object):String
{
return "$" + item["@value"] + " USD";
}
protected function dataTipFormatFn(data:Object,
seriesColor:uint):Object
{
title.text = data["@name"];
cat1Title.text = data["@value"] + " (" + Math.round(data["@value"] / funnelChart.totalWeight * 100) + "%)";
UIComponent(funnelChart.dataTipInstance).setStyle("borderColor", seriesColor);
return tf;
}
protected function labelsFormatFn(item:Object):String
{
return "Potential " + item["@value"] + " Euros";
}
protected function removedFromStageHandler(event:Event):void
{
}
]]>
</fx:Script>
<fx:Declarations>
<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:br/><s:span fontSize="10" fontStyle="italic">*All numbers are in thousands of USA dollars</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="Funnel Chart Description"
description="Funnel Chart. Can use a variable slope for the renderers. See the API."
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="Sort Data:">
<s:CheckBox id="sortSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to sort the data and display from top to bottom, largest to smallest value."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Series Labels"/>
<s:FormItem label="Display Labels:">
<s:CheckBox id="displayLabelsSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{displayLabelsSelect.selected}"
label="Format Fn:">
<s:CheckBox id="labelFormatFunctionSelect"
selected="false"
change="funnelChart.labelsFormatFunction=labelFormatFunctionSelect.selected ? labelsFormatFunction : null; XMLListCollection(funnelChart.dataProvider).refresh();"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="User provided function that formats labels."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Layout"/>
<s:FormItem label="Slope:">
<s:HSlider id="slopeSelect"
width="100"
minimum="0" maximum="1" snapInterval="0" value="0.25"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Adjusts the steepness of the funnel."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Neck Ratio:">
<s:HSlider id="neckRatioSelect"
width="100"
minimum="0" maximum="1" snapInterval="0" value="0.15"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Width of the base expressed as a percentage of the total chart width."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Gap:">
<s:HSlider id="gapSelect"
width="100"
minimum="0" maximum="10" snapInterval="1" value="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Gap between sections of the funnel."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Colors"/>
<s:FormItem label="Custom Color Fn:">
<s:CheckBox id="colorFunctionSelect"
selected="false"
change="funnelChart.colorFormatFunction=colorFunctionSelect.selected ? colorFn : null; XMLListCollection(funnelChart.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>
<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="funnelChart.dataTipFormatFunction=dataTipFunctionSelect.selected ? dataTipFormatFn : null; XMLListCollection(funnelChart.dataProvider).refresh();"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="User provided function that formats the string displayed by the data tip."/>
</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>Basic example</data:tabLabel>
<data:exampleDescription>Basic example of a funnel chart.</data:exampleDescription>
<data:primaryContent>
<s:HGroup top="40" right="40" bottom="40" left="40"
horizontalAlign="center" verticalAlign="top"
gap="100">
<funnel:Funnel id="funnelChart"
width="100%" height="100%"
seriesLabelField="@name" seriesValueField="@value"
displayLabels="{displayLabelsSelect.selected}"
slope="{slopeSelect.value}"
neckRatio="{neckRatioSelect.value}"
gap="{gapSelect.value}"
sorted="{sortSelect.selected}"
showDataTip="{showDataTipSelect.selected}"
dataTipHideDelay="{dataTipHideDelaySelect.value}"
highlightAlpha="{hoverFadeAlphaSelect.value}"
highlightDuration="{hoverFadeDurationSelect.value}"
dataTipFormatFunction="dataTipFormatFn">
<s:XMLListCollection id="collection">
<fx:XMLList>
<node value="3000" name="Stage One" />
<node value="900" name="Stage Two" />
<node value="5442" name="Stage Three" />
<node value="1900" name="Stage Four" />
<node value="1900" name="Stage Five" />
<node value="500" name="Final Stage" />
</fx:XMLList>
</s:XMLListCollection>
</funnel:Funnel>
<legend:Legend chart="{funnelChart}"
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="40" left="40"
verticalCenter="0"
horizontalAlign="center"
gap="50">
<s:VGroup horizontalAlign="center"
gap="20">
<s:Label text="Sales Pipeline #1"
fontWeight="bold"/>
<funnel:Funnel id="funnelA"
width="250" height="300"
displayLabels="false"
slope="0.25" neckRatio="0.05"
highlightAlpha="0.75" highlightDuration="150"
seriesLabelField="@name" seriesValueField="@value">
<s:XMLListCollection>
<fx:XMLList>
<node value="2600" name="Prospect"/>
<node value="600" name="Qualification"/>
<node value="300" name="Analysis"/>
<node value="245" name="Demo"/>
<node value="1200" name="Proposal"/>
<node value="300" name="Negotiate"/>
<node value="1500" name="Contract"/>
</fx:XMLList>
</s:XMLListCollection>
</funnel:Funnel>
<legend:Legend width="300"
chart="{funnelA}">
<legend:layout>
<s:TileLayout requestedColumnCount="3"
horizontalGap="0" verticalGap="0" />
</legend:layout>
</legend:Legend>
</s:VGroup>
<separators:VSeparator height="100%"/>
<s:VGroup horizontalAlign="center"
gap="20">
<s:Label text="Sales Pipeline #2"
fontWeight="bold"/>
<s:HGroup gap="20">
<funnel:Funnel id="funnelB"
width="250" height="300"
gap="0"
slope="0" neckRatio="0.5"
labelsFormatFunction="labelsFormatFn"
seriesLabelField="@name" seriesValueField="@value">
<s:XMLListCollection>
<fx:XMLList xmlns="">
<node value="600" name="Prospect"/>
<node value="800" name="Qualification"/>
<node value="300" name="Analysis"/>
<node value="245" name="Demo"/>
<node value="1200" name="Proposal"/>
<node value="300" name="Negotiate"/>
<node value="786" name="Contract"/>
</fx:XMLList>
</s:XMLListCollection>
</funnel:Funnel>
<legend:Legend chart="{funnelB}"/>
</s:HGroup>
</s:VGroup>
</s:HGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>