<?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:sparklines="ardisia.charts.sparklines.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:colorPicker="ardisia.components.colorPicker.*"
frameRate="60"
width="100%" height="100%"
preinitialize="preinitializeHandler(event)"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import flashx.textLayout.elements.TextFlow;
[Bindable]public var dataTipFormatFunction:Function = formatFn;
[Bindable]public var dp:ArrayCollection;
public function creationComplete():void
{
}
private function formatFn(value:Object):Object
{
if (value.hasOwnProperty("y"))
{
textFlow = new Tf2();
Object(textFlow).data = value;
return textFlow;
}
var textFlow:TextFlow = new Tf();
Object(textFlow).data = value;
return textFlow;
}
protected function removedFromStageHandler(event:Event):void
{
}
protected function preinitializeHandler(event:FlexEvent):void
{
dp = new ArrayCollection([
{Breed:'Afghan Hound', 2003: 264, 2004: 235, 2005: 213, 2006: 194, 2007: 198, 2008: 147, 2009: 140, 2010: 122, 2011: 124, 2012: 162},
{Breed:'Beagle', 2003: 1300, 2004: 1451, 2005: 1709, 2006: 1817, 2007: 2124, 2008: 2405, 2009: 2592, 2010: 2877, 2011: 2687, 2012: 2728},
{Breed:'Irish Wolfhound', 2003: 437, 2004: 384, 2005: 460, 2006: 418, 2007: 487, 2008: 439, 2009: 323, 2010: 352, 2011: 321, 2012: 302},
{Breed:'Alaskan Malamute', 2003: 341, 2004: 586, 2005: 718, 2006: 889, 2007: 1161, 2008: 1245, 2009: 1195, 2010: 1232, 2011: 1295, 2012: 1053},
{Breed:'Rottweiler', 2003: 6369, 2004: 6726, 2005: 6692, 2006: 6575, 2007: 4257, 2008: 2631, 2009: 2156, 2010: 1959, 2011: 1951, 2012: 1554},
{Breed:'Norwich Terrier', 2003: 143, 2004: 124, 2005: 131, 2006: 147, 2007: 128, 2008: 152, 2009: 160, 2010: 172, 2011: 158, 2012: 170},
{Breed:'Weimaraner', 2003: 2978, 2004: 2841, 2005: 2848, 2006: 2744, 2007: 2724, 2008: 2288, 2009: 1951, 2010: 1969, 2011: 1581, 2012: 1307},
{Breed:'Australian Cattle Dog', 2003: 67, 2004: 93, 2005: 90, 2006: 69, 2007: 80, 2008: 84, 2009: 92, 2010: 69, 2011: 65, 2012: 65},
{Breed:'Golden Retriever', 2003: 10710, 2004: 10489, 2005: 10165, 2006: 9373, 2007: 9557, 2008: 9159, 2009: 7804, 2010: 7911, 2011: 8081, 2012: 7085}
]);
for each (var item:Object in dp)
{
var collection:ArrayCollection = new ArrayCollection();
for (var i:int = 2003; i < 2013; i++)
{
collection.addItem({
breed: String(item.Breed),
year: String(i),
value: item[String(i)]
});
}
item.chart = collection;
}
}
]]>
</fx:Script>
<fx:Declarations>
<fx:Component className="Tf">
<s:TextFlow>
<fx:Script>
<![CDATA[
public function set data(item:Object):void
{
breed.text = item.breed;
year.text = item.year + ": ";
value.text = item.value;
}
]]>
</fx:Script>
<s:p paddingBottom="5"><s:span id="breed" fontSize="11"></s:span></s:p>
<s:span id="year" fontSize="11" fontWeight="bold"></s:span> <s:span id="value" fontSize="11"></s:span>
</s:TextFlow>
</fx:Component>
<fx:Component className="Tf2">
<s:TextFlow>
<fx:Script>
<![CDATA[
public function set data(item:Object):void
{
y.text = item.y;
}
]]>
</fx:Script>
<s:p paddingBottom="5"><s:span id="y" fontSize="11"></s:span></s:p>
<s:span fontSize="11" fontStyle="italic">* datatips support TextFlows</s:span>
</s:TextFlow>
</fx:Component>
<s:NumberFormatter id="nf"
fractionalDigits="0"
trailingZeros="false"/>
</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="Sparklines Description"
description="The Ardisia Sparkline package includes small line charts, bar charts, and pie charts. These charts are designed to be displayed in large numbers, and as a result they are highly performant."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>Shared API</data:label>
<data:content>
<s:FormHeading label="Data Tip"/>
<s:FormItem label="Show On Hover:">
<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="250"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Delay before removing datatip after mousing out of a data point."/>
</s:helpContent>
</s:FormItem>
<s:FormItem id="dataTipDefaultPrecisionFormItem"
enabled="{!dataTipFunctionSelect.selected}"
label="Precision:">
<s:HSlider id="dataTipDefaultPrecisionSelect"
width="100"
minimum="0" maximum="10" value="2" snapInterval="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Default numerical precision for the number formatter if a dataTipFormatFunction or dataTipField is not provided."/>
</s:helpContent>
</s:FormItem>
<s:FormItem enabled="{showDataTipSelect.selected}"
id="dataTipFunctionFormItem"
label="Use Format Fn:">
<s:CheckBox id="dataTipFunctionSelect"
selected="true"
change="dataTipFormatFunction=dataTipFunctionSelect.selected ? formatFn : null"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="User provided function that provides the string or TextFlow to pass to the data tip."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
<!--- expanding container #2 -->
<data:ExpandingContainerData>
<data:label>Line / Bar API</data:label>
<data:content>
<s:FormHeading label="Axis"/>
<s:FormItem label="Display Axis:">
<s:CheckBox id="showAxisSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to display the horizontal axis line."/>
</s:helpContent>
</s:FormItem>
<s:FormItem enabled="{showAxisSelect.selected}"
label="Thickness:">
<s:HSlider id="axisThicknessSelect"
width="100"
minimum="0" maximum="10" value="1"/>
</s:FormItem>
<s:FormItem enabled="{showAxisSelect.selected}"
label="Color:">
<colorPicker:ColorPicker id="axisColorSelect"
selectedColor="#666666"/>
</s:FormItem>
<s:FormItem label="Automatic:">
<s:CheckBox id="autoAxisSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to automatically set the axis value to the mean of the calculated maximum and minimum y values. If true, then the 'axisValue' property is ignored."/>
</s:helpContent>
</s:FormItem>
<s:FormItem enabled="{!autoAxisSelect.selected}"
label="Value:">
<s:HSlider id="axisValueSelect"
width="100"
minimum="-1000" maximum="1000" value="1" snapInterval="0" stepSize="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The data value at which to display the axis. Only relevant if the 'autoAxis' property is false."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Values Range"/>
<s:FormItem label="Automatic:">
<s:CheckBox id="autoRangeSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="If true, the minY and maxY values will be automatically calculated from the data provider. 'minY' and 'maxY' are only relevant if this property is false."/>
</s:helpContent>
</s:FormItem>
<s:FormItem enabled="{!autoRangeSelect.selected}"
label="Min Y:">
<s:HSlider id="minYSelect"
width="100"
minimum="-1000" maximum="-1" value="-500" snapInterval="0" stepSize="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The minimum displayed y value. Only relevant if the 'autoRange' property is false."/>
</s:helpContent>
</s:FormItem>
<s:FormItem enabled="{!autoRangeSelect.selected}"
label="Max Y:">
<s:HSlider id="maxYSelect"
width="100"
minimum="0" maximum="1000" value="500" snapInterval="0" stepSize="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The maximum displayed y value. Only relevant if the 'autoRange' property is false."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Normal Range"/>
<s:FormItem label="Show:">
<s:CheckBox id="showNormalRangeSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to display a rectangular region used to represent the 'normal value range'."/>
</s:helpContent>
</s:FormItem>
<s:FormItem id="normalRangeColorFormItem"
enabled="{showNormalRangeSelect.selected}"
label="Color:">
<colorPicker:ColorPicker id="normalRangeColorSelect"
selectedColor="#EBEAEA"/>
</s:FormItem>
<s:FormItem id="normalRangeAlphaFormItem"
enabled="{showNormalRangeSelect.selected}"
label="Alpha:">
<s:HSlider id="normalRangeAlphaSelect"
width="100"
minimum="0" maximum="1" value="0.5" snapInterval="0"/>
</s:FormItem>
<s:FormItem id="autoNormalRangeSelectFormItem"
label="Automatic:">
<s:CheckBox id="autoNormalRangeSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="If true, the normal range height and y position will be automatically calculated and displayed in the center of the control. The height of the normal range will be determined by the 'autoNormalRangePercent' property if this property is true. 'normalRangeMinY' and 'normalRangeMaxY' are only relevant if this property is false. This property is only relevant if 'showNormalRange' is true."/>
</s:helpContent>
</s:FormItem>
<s:FormItem id="autoNormalRangePercentFormItem"
enabled="{autoNormalRangeSelect.selected}"
label="Auto % Height:">
<s:HSlider id="autoNormalRangePercentSelect"
width="100"
minimum="0" maximum="1" value=".33" snapInterval="0"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Percentage of the height of the chart covered by the normal range. This property is only relevant if 'showNormalRange' is true."/>
</s:helpContent>
</s:FormItem>
<s:FormItem id="normalRangeMinYFormItem"
enabled="{!autoNormalRangeSelect.selected}"
label="Min Y:">
<s:HSlider id="normalRangeMinYSelect"
width="100"
minimum="-500" maximum="{normalRangeMaxYSelect.minimum}" value="-100" snapInterval="0" stepSize="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="If 'autoNormalRange' is false, this is the minimum value contained within the normal range. This property is only relevant if 'showNormalRange' is true."/>
</s:helpContent>
</s:FormItem>
<s:FormItem id="normalRangeMaxYFormItem"
enabled="{!autoNormalRangeSelect.selected}"
label="Max Y:">
<s:HSlider id="normalRangeMaxYSelect"
width="100"
minimum="{normalRangeMinYSelect.maximum}" maximum="500" value="-100" snapInterval="0" stepSize="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="If 'autoNormalRange' is false, this is the maximum value contained within the normal range. This property is only relevant if 'showNormalRange' is true."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>DataGrid Renderer Examples</data:tabLabel>
<data:exampleDescription>Sparklines used inline in a DataGrid to visually represent the row's data. Fully supports the customization API while displaying a data tip and being highly performant.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup>
<s:Form>
<s:FormHeading label="Shared Styling"/>
<s:FormItem label="Background Color:">
<colorPicker:ColorPicker id="backgroundColorSelectA"
selectedColor="#FFFFFF"/>
</s:FormItem>
<s:FormItem label="Background Alpha:">
<s:HSlider id="backgroundAlphaSelectA"
width="100"
minimum="0" maximum="1" snapInterval="0" value="1"/>
</s:FormItem>
<s:FormItem label="First/Last Color:">
<colorPicker:ColorPicker id="firstLastColorSelectA"
selectedColor="#336699"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The displayed color for the first and last data points."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Min/Max Color:">
<colorPicker:ColorPicker id="minMaxColorSelectA"
selectedColor="#0099FF"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The displayed color for the maximum and minimum value data points."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormHeading label="Bar"/>
<s:FormItem label="Gap:">
<s:HSlider id="gapSelectA"
width="100"
minimum="0" maximum="10" value="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The gap between bars in pixels"/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Default Color:">
<colorPicker:ColorPicker id="defaultBarColorSelectA"
selectedColor="#767676"/>
</s:FormItem>
<s:FormItem label="Below Axis Color:">
<colorPicker:ColorPicker id="belowAxisBarColorSelectA"
selectedColor="#BBBBBB"/>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormHeading label="Line"/>
<s:FormItem label="Form:">
<s:DropDownList id="formSelectA"
width="100"
selectedIndex="0">
<s:ArrayCollection>
<fx:String>segment</fx:String>
<fx:String>curve</fx:String>
<fx:String>step</fx:String>
<fx:String>vertical</fx:String>
<fx:String>horizontal</fx:String>
<fx:String>reverseStep</fx:String>
</s:ArrayCollection>
</s:DropDownList>
</s:FormItem>
<s:FormItem label="Show Markers:">
<s:CheckBox id="showMarkersSelectA"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to display markers (circles) at each data point along the line."/>
</s:helpContent>
</s:FormItem>
<s:FormItem enabled="{showMarkersSelectA.selected}"
label="Default Radius:">
<s:HSlider id="markerRadiusSelectA"
width="100"
minimum="0" maximum="10" value="2"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The default radius of the markers."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormItem enabled="{showMarkersSelectA.selected}"
label="Marker Color:">
<colorPicker:ColorPicker id="markerColorSelectA"
selectedColor="#336699"/>
</s:FormItem>
<s:FormItem enabled="{showMarkersSelectA.selected}"
label="Min/Max Radius:">
<s:HSlider id="minMaxMarkerRadiusSelectA"
width="100"
minimum="0" maximum="10" value="3"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The radius of the marker (circle) to draw at the maximum and minimum valued data points on the line. Only relevant if the 'showMarkers' property is true."/>
</s:helpContent>
</s:FormItem>
<s:FormItem enabled="{showMarkersSelectA.selected}"
label="First/Last Radius:">
<s:HSlider id="firstLastMarkerRadiusSelectA"
width="100"
minimum="0" maximum="10" value="3"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The radius of the marker (circle) to draw at the first and last point on the line Only relevant if the 'showMarkers' property is true."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Stroke Thickness:">
<s:HSlider id="strokeThicknessSelectA"
width="100"
minimum="1" maximum="10" value="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The thickness of the drawn line."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Stroke Color:">
<colorPicker:ColorPicker id="strokeColorSelectA"
selectedColor="#767676"/>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormHeading label="Pie"/>
<s:FormItem label="Default Color:">
<colorPicker:ColorPicker id="pieDefaultColorSelect"
selectedColor="#BBBBBB"
showColorSpacePicker="true" enableOutsideHoverColorSelect="true"/>
</s:FormItem>
</s:Form>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<s:DataGrid id="myGrid"
top="20" right="20" bottom="20" left="20"
horizontalCenter="0" verticalCenter="0"
dataProvider="{dp}"
variableRowHeight="false"
resizableColumns="false">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="Breed" width="125"/>
<s:GridColumn dataField="2003"/>
<s:GridColumn dataField="2004"/>
<s:GridColumn dataField="2005"/>
<s:GridColumn dataField="2006"/>
<s:GridColumn dataField="2007"/>
<s:GridColumn dataField="2008"/>
<s:GridColumn dataField="2009"/>
<s:GridColumn dataField="2010"/>
<s:GridColumn dataField="2011"/>
<s:GridColumn dataField="2012"/>
<s:GridColumn width="100" headerText="Bar">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<sparklines:SparklineBar top="2" right="2" bottom="2" left="2"
height="45"
dataProvider="{data.chart}"
yField="value"
gap="{outerDocument.gapSelectA.value}"
showDataTip="{outerDocument.showDataTipSelect.selected}"
dataTipDefaultPrecision="{outerDocument.dataTipDefaultPrecisionSelect.value}"
dataTipHideDelay="{outerDocument.dataTipHideDelaySelect.value}"
dataTipFormatFunction="{outerDocument.dataTipFormatFunction}"
showAxis="{outerDocument.showAxisSelect.selected}"
autoAxis="{outerDocument.autoAxisSelect.selected}"
axisValue="{outerDocument.axisValueSelect.value}"
autoRange="{outerDocument.autoRangeSelect.selected}"
minY="{outerDocument.minYSelect.value}"
maxY="{outerDocument.maxYSelect.value}"
showNormalRange="{outerDocument.showNormalRangeSelect.selected}"
autoNormalRange="{outerDocument.autoNormalRangeSelect.selected}"
autoNormalRangePercent="{outerDocument.autoNormalRangePercentSelect.value}"
normalRangeMinY="{outerDocument.normalRangeMinYSelect.value}"
normalRangeMaxY="{outerDocument.normalRangeMaxYSelect.value}"
axisThickness="{outerDocument.axisThicknessSelect.value}"
axisColor="{outerDocument.axisColorSelect.selectedColor}"
normalRangeAlpha="{outerDocument.normalRangeAlphaSelect.value}"
normalRangeColor="{outerDocument.normalRangeColorSelect.selectedColor}"
firstLastColor="{outerDocument.firstLastColorSelectA.selectedColor}"
minMaxColor="{outerDocument.minMaxColorSelectA.selectedColor}"
backgroundColor="{outerDocument.backgroundColorSelectA.selectedColor}"
backgroundAlpha="{outerDocument.backgroundAlphaSelectA.value}"
defaultBarColor="{outerDocument.defaultBarColorSelectA.selectedColor}"
belowAxisBarColor="{outerDocument.belowAxisBarColorSelectA.selectedColor}" />
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn width="100" headerText="Line">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<sparklines:SparklineLine top="2" right="2" bottom="2" left="2"
height="45"
dataProvider="{data.chart}"
yField="value"
form="{outerDocument.formSelectA.selectedItem}"
showDataTip="{outerDocument.showDataTipSelect.selected}"
dataTipDefaultPrecision="{outerDocument.dataTipDefaultPrecisionSelect.value}"
dataTipHideDelay="{outerDocument.dataTipHideDelaySelect.value}"
dataTipFormatFunction="{outerDocument.dataTipFormatFunction}"
showAxis="{outerDocument.showAxisSelect.selected}"
autoAxis="{outerDocument.autoAxisSelect.selected}"
axisValue="{outerDocument.axisValueSelect.value}"
autoRange="{outerDocument.autoRangeSelect.selected}"
minY="{outerDocument.minYSelect.value}"
maxY="{outerDocument.maxYSelect.value}"
showNormalRange="{outerDocument.showNormalRangeSelect.selected}"
autoNormalRange="{outerDocument.autoNormalRangeSelect.selected}"
autoNormalRangePercent="{outerDocument.autoNormalRangePercentSelect.value}"
normalRangeMinY="{outerDocument.normalRangeMinYSelect.value}"
normalRangeMaxY="{outerDocument.normalRangeMaxYSelect.value}"
axisThickness="{outerDocument.axisThicknessSelect.value}"
axisColor="{outerDocument.axisColorSelect.selectedColor}"
normalRangeAlpha="{outerDocument.normalRangeAlphaSelect.value}"
normalRangeColor="{outerDocument.normalRangeColorSelect.selectedColor}"
firstLastColor="{outerDocument.firstLastColorSelectA.selectedColor}"
minMaxColor="{outerDocument.minMaxColorSelectA.selectedColor}"
backgroundColor="{outerDocument.backgroundColorSelectA.selectedColor}"
backgroundAlpha="{outerDocument.backgroundAlphaSelectA.value}"
showMarkers="{outerDocument.showMarkersSelectA.selected}"
minMaxMarkerRadius="{outerDocument.minMaxMarkerRadiusSelectA.value}"
firstLastMarkerRadius="{outerDocument.firstLastMarkerRadiusSelectA.value}"
markerRadius="{outerDocument.markerRadiusSelectA.value}"
strokeThickness="{outerDocument.strokeThicknessSelectA.value}"
strokeColor="{outerDocument.strokeColorSelectA.selectedColor}"
markerColor="{outerDocument.markerColorSelectA.selectedColor}"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn width="60" headerText="Pie">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<sparklines:SparklinePie top="2" right="2" bottom="2" left="2"
height="45"
backgroundColor="{outerDocument.backgroundColorSelectA.selectedColor}"
backgroundAlpha="{outerDocument.backgroundAlphaSelectA.value}"
dataProvider="{data.chart}"
seriesField="value"
showDataTip="{outerDocument.showDataTipSelect.selected}"
dataTipDefaultPrecision="{outerDocument.dataTipDefaultPrecisionSelect.value}"
dataTipHideDelay="{outerDocument.dataTipHideDelaySelect.value}"
dataTipFormatFunction="{outerDocument.dataTipFormatFunction}"
minMaxColor="{outerDocument.minMaxColorSelectA.selectedColor}"
defaultColor="{outerDocument.pieDefaultColorSelect.selectedColor}"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Sparkline Bar Example</data:tabLabel>
<data:exampleDescription>Sparkline charts do not need to be used inline in data grids. They can also be used as stand-alone charts as the example below illustrates. This example has values that are not whole numbers so you can test the data tip precision property.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup>
<s:Form>
<s:FormHeading label="Layout"/>
<s:FormItem label="Width:">
<s:HSlider id="widthSelectA"
minimum="50" maximum="800" value="400"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The width of the example below."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Height:">
<s:HSlider id="heightSelectA"
minimum="50" maximum="600" value="200"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The height of the example below."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormHeading label="Styling"/>
<s:FormItem label="Background Color:">
<colorPicker:ColorPicker id="backgroundColorSelectB"
selectedColor="#FFFFFF"/>
</s:FormItem>
<s:FormItem label="Background Alpha:">
<s:HSlider id="backgroundAlphaSelectB"
width="100"
minimum="0" maximum="1" snapInterval="0" value="1"/>
</s:FormItem>
<s:FormItem label="First/Last Color:">
<colorPicker:ColorPicker id="firstLastColorSelectB"
selectedColor="#336699"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The displayed color for the first and last data points."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormItem label="Min/Max Color:">
<colorPicker:ColorPicker id="minMaxColorSelectB"
selectedColor="#0099FF"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The displayed color for the maximum and minimum value data points."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Gap:">
<s:HSlider id="gapSelectB"
width="100"
minimum="0" maximum="10" value="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The gap between bars in pixels"/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Default Color:">
<colorPicker:ColorPicker id="defaultBarColorSelectB"
selectedColor="#767676"/>
</s:FormItem>
<s:FormItem label="Below Axis Color:">
<colorPicker:ColorPicker id="belowAxisBarColorSelectB"
selectedColor="#BBBBBB"/>
</s:FormItem>
</s:Form>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<sparklines:SparklineBar width="{widthSelectA.value}" height="{heightSelectA.value}"
yField="y"
horizontalCenter="0" verticalCenter="0"
gap="{gapSelectB.value}"
showDataTip="{showDataTipSelect.selected}"
dataTipDefaultPrecision="{dataTipDefaultPrecisionSelect.value}"
dataTipHideDelay="{dataTipHideDelaySelect.value}"
dataTipFormatFunction="{dataTipFormatFunction}"
showAxis="{showAxisSelect.selected}"
autoAxis="{autoAxisSelect.selected}"
axisValue="{axisValueSelect.value}"
autoRange="{autoRangeSelect.selected}"
minY="{minYSelect.value}"
maxY="{maxYSelect.value}"
showNormalRange="{showNormalRangeSelect.selected}"
autoNormalRange="{autoNormalRangeSelect.selected}"
autoNormalRangePercent="{autoNormalRangePercentSelect.value}"
normalRangeMinY="{normalRangeMinYSelect.value}"
normalRangeMaxY="{normalRangeMaxYSelect.value}"
axisThickness="{axisThicknessSelect.value}"
axisColor="{axisColorSelect.selectedColor}"
normalRangeAlpha="{normalRangeAlphaSelect.value}"
normalRangeColor="{normalRangeColorSelect.selectedColor}"
firstLastColor="{firstLastColorSelectB.selectedColor}"
minMaxColor="{minMaxColorSelectB.selectedColor}"
backgroundColor="{backgroundColorSelectB.selectedColor}"
backgroundAlpha="{backgroundAlphaSelectB.value}"
defaultBarColor="{defaultBarColorSelectB.selectedColor}"
belowAxisBarColor="{belowAxisBarColorSelectB.selectedColor}">
<s:ArrayCollection>
<fx:Object y="224" />
<fx:Object y="235" />
<fx:Object y="213" />
<fx:Object y="194" />
<fx:Object y="198" />
<fx:Object y="147" />
<fx:Object y="140" />
<fx:Object y="122" />
<fx:Object y="124" />
<fx:Object y="162" />
</s:ArrayCollection>
</sparklines:SparklineBar>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #3 -->
<data:PrimaryContentData>
<data:tabLabel>Sparkline Line Example</data:tabLabel>
<data:exampleDescription>Sparkline charts do not need to be used inline in data grids. They can also be used as stand-alone charts as the example below illustrates. This example has values that are not whole numbers so you can test the data tip precision property.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup>
<s:Form>
<s:FormHeading label="Layout"/>
<s:FormItem label="Width:">
<s:HSlider id="widthSelectB"
minimum="50" maximum="800" value="400"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The width of the example below."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Height:">
<s:HSlider id="heightSelectB"
minimum="50" maximum="600" value="200"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The height of the example below."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormHeading label="Styling"/>
<s:FormItem label="Background Color:">
<colorPicker:ColorPicker id="backgroundColorSelectC"
selectedColor="#FFFFFF"/>
</s:FormItem>
<s:FormItem label="Background Alpha:">
<s:HSlider id="backgroundAlphaSelectC"
width="100"
minimum="0" maximum="1" snapInterval="0" value="1"/>
</s:FormItem>
<s:FormItem label="First/Last Color:">
<colorPicker:ColorPicker id="firstLastColorSelectC"
selectedColor="#336699"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The displayed color for the first and last data points."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Min/Max Color:">
<colorPicker:ColorPicker id="minMaxColorSelectC"
selectedColor="#0099FF"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The displayed color for the maximum and minimum value data points."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormHeading label="Line"/>
<s:FormItem label="Form:">
<s:DropDownList id="formSelectC"
width="100"
selectedIndex="0">
<s:ArrayCollection>
<fx:String>segment</fx:String>
<fx:String>curve</fx:String>
<fx:String>step</fx:String>
<fx:String>vertical</fx:String>
<fx:String>horizontal</fx:String>
<fx:String>reverseStep</fx:String>
</s:ArrayCollection>
</s:DropDownList>
</s:FormItem>
<s:FormItem label="Show Markers:">
<s:CheckBox id="showMarkersSelectC"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to display markers (circles) at each data point along the line."/>
</s:helpContent>
</s:FormItem>
<s:FormItem enabled="{showMarkersSelectC.selected}"
label="Default Radius:">
<s:HSlider id="markerRadiusSelectC"
width="100"
minimum="0" maximum="10" value="4"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The default radius of the markers."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormItem enabled="{showMarkersSelectC.selected}"
label="Marker Color:">
<colorPicker:ColorPicker id="markerColorSelectC"
selectedColor="#336699"/>
</s:FormItem>
<s:FormItem enabled="{showMarkersSelectC.selected}"
label="Min/Max Radius:">
<s:HSlider id="minMaxMarkerRadiusSelectC"
width="100"
minimum="0" maximum="10" value="5"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The radius of the marker (circle) to draw at the maximum and minimum valued data points on the line. Only relevant if the 'showMarkers' property is true."/>
</s:helpContent>
</s:FormItem>
<s:FormItem enabled="{showMarkersSelectC.selected}"
label="First/Last Radius:">
<s:HSlider id="firstLastMarkerRadiusSelectC"
width="100"
minimum="0" maximum="10" value="5"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The radius of the marker (circle) to draw at the first and last point on the line Only relevant if the 'showMarkers' property is true."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Stroke Thickness:">
<s:HSlider id="strokeThicknessSelectC"
width="100"
minimum="1" maximum="10" value="2"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The thickness of the drawn line."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Stroke Color:">
<colorPicker:ColorPicker id="strokeColorSelectC"
selectedColor="#767676"/>
</s:FormItem>
</s:Form>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<sparklines:SparklineLine width="{widthSelectB.value}" height="{heightSelectB.value}"
xField="x" yField="y"
horizontalCenter="0" verticalCenter="0"
form="{formSelectC.selectedItem}"
showDataTip="{showDataTipSelect.selected}"
dataTipDefaultPrecision="{dataTipDefaultPrecisionSelect.value}"
dataTipHideDelay="{dataTipHideDelaySelect.value}"
dataTipFormatFunction="{dataTipFormatFunction}"
showAxis="{showAxisSelect.selected}"
autoAxis="{autoAxisSelect.selected}"
axisValue="{axisValueSelect.value}"
autoRange="{autoRangeSelect.selected}"
minY="{minYSelect.value}"
maxY="{maxYSelect.value}"
showNormalRange="{showNormalRangeSelect.selected}"
autoNormalRange="{autoNormalRangeSelect.selected}"
autoNormalRangePercent="{autoNormalRangePercentSelect.value}"
normalRangeMinY="{normalRangeMinYSelect.value}"
normalRangeMaxY="{normalRangeMaxYSelect.value}"
axisThickness="{axisThicknessSelect.value}"
axisColor="{axisColorSelect.selectedColor}"
normalRangeAlpha="{normalRangeAlphaSelect.value}"
normalRangeColor="{normalRangeColorSelect.selectedColor}"
firstLastColor="{firstLastColorSelectC.selectedColor}"
minMaxColor="{minMaxColorSelectC.selectedColor}"
backgroundColor="{backgroundColorSelectC.selectedColor}"
backgroundAlpha="{backgroundAlphaSelectC.value}"
showMarkers="{showMarkersSelectC.selected}"
minMaxMarkerRadius="{minMaxMarkerRadiusSelectC.value}"
firstLastMarkerRadius="{firstLastMarkerRadiusSelectC.value}"
markerRadius="{markerRadiusSelectC.value}"
strokeThickness="{strokeThicknessSelectC.value}"
strokeColor="{strokeColorSelectC.selectedColor}"
markerColor="{markerColorSelectC.selectedColor}">
<s:ArrayCollection>
<fx:Object x="0" y="224"/>
<fx:Object x="1" y="235"/>
<fx:Object x="2" y="213" />
<fx:Object x="3" y="194" />
<fx:Object x="4" y="148" />
<fx:Object x="5" y="177" />
<fx:Object x="6" y="200" />
<fx:Object x="7" y="190" />
<fx:Object x="8" y="156" />
<fx:Object x="9" y="245" />
</s:ArrayCollection>
</sparklines:SparklineLine>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #4 -->
<data:PrimaryContentData>
<data:tabLabel>Sparkline Pie Example</data:tabLabel>
<data:exampleDescription></data:exampleDescription>
<data:toolbarContent>
<s:HGroup>
<s:Form>
<s:FormHeading label="Layout"/>
<s:FormItem label="Radius:">
<s:HSlider id="radiusSelectC"
minimum="20" maximum="800" value="200"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The width of the example below."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormHeading label="Styling"/>
<s:FormItem label="Background Color:">
<colorPicker:ColorPicker id="backgroundColorSelectD"
selectedColor="#FFFFFF"/>
</s:FormItem>
<s:FormItem label="Background Alpha:">
<s:HSlider id="backgroundAlphaSelectD"
width="100"
minimum="0" maximum="1" snapInterval="0" value="1"/>
</s:FormItem>
<s:FormItem label="Min/Max Color:">
<colorPicker:ColorPicker id="minMaxColorSelectD"
selectedColor="#0099FF"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The displayed color for the maximum and minimum value data points."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Default Color:">
<colorPicker:ColorPicker id="pieDefaultColorSelectD"
selectedColor="#BBBBBB"
showColorSpacePicker="true" enableOutsideHoverColorSelect="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The default color for data points."/>
</s:helpContent>
</s:FormItem>
</s:Form>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<sparklines:SparklinePie width="{radiusSelectC.value}" height="{radiusSelectC.value}"
seriesField="y"
backgroundColor="{backgroundColorSelectD.selectedColor}"
backgroundAlpha="{backgroundAlphaSelectD.value}"
showDataTip="{showDataTipSelect.selected}"
dataTipDefaultPrecision="{dataTipDefaultPrecisionSelect.value}"
dataTipHideDelay="{dataTipHideDelaySelect.value}"
dataTipFormatFunction="{dataTipFormatFunction}"
defaultColor="{pieDefaultColorSelectD.selectedColor}"
minMaxColor="{minMaxColorSelectD.selectedColor}"
horizontalCenter="0" verticalCenter="0">
<s:ArrayCollection>
<fx:Object y="324" />
<fx:Object y="235" />
<fx:Object y="213" />
<fx:Object y="194" />
<fx:Object y="198" />
<fx:Object y="90" />
<fx:Object y="140" />
<fx:Object y="122" />
<fx:Object y="124" />
<fx:Object y="162" />
</s:ArrayCollection>
</sparklines:SparklinePie>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #5 -->
<data:PrimaryContentData>
<data:tabLabel>Non-Uniform X Values Example</data:tabLabel>
<data:exampleDescription>For Sparklines, the x values for data can be set for non-uniform placement of data points. For the example below, the data set has 9 points that have nearly identical x values, and 1 point that has a distant x value. The relative positioning of the data on the sparkline will reflect this.</data:exampleDescription>
<data:primaryContent>
<sparklines:SparklineLine width="450" height="200"
xField="x" yField="y"
horizontalCenter="0" verticalCenter="0"
dataTipDefaultPrecision="{dataTipDefaultPrecisionSelect.value}"
dataTipHideDelay="{dataTipHideDelaySelect.value}"
dataTipFormatFunction="{dataTipFormatFunction}"
form="curve"
showMarkers="true"
minMaxMarkerRadius="4"
firstLastMarkerRadius="4"
markerRadius="5"
strokeThickness="2"
showNormalRange="false"
showAxis="false"
backgroundAlpha="0.05" backgroundColor="#000000">
<s:ArrayCollection>
<fx:Object x="0" y="10" />
<fx:Object x="1" y="20" />
<fx:Object x="2" y="30" />
<fx:Object x="3" y="50" />
<fx:Object x="4" y="32" />
<fx:Object x="5" y="66" />
<fx:Object x="6" y="90" />
<fx:Object x="7" y="82" />
<fx:Object x="8" y="101" />
<fx:Object x="50" y="235" />
</s:ArrayCollection>
</sparklines:SparklineLine>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>