<?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: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)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            
            import flashx.textLayout.elements.TextFlow;
            
            //--------------------------------------
            //  variables
            //--------------------------------------
            
            [Bindable]public var dataTipFormatFunction:Function = formatFn;
            
            [Bindable]public var dp:ArrayCollection;
            
            //----------------------------------
            //     methods
            //----------------------------------
            
            public function creationComplete():void
            {
                
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            private function formatFn(value:Object):Object
            {
                // examples #2+
                if (value.hasOwnProperty("y"))
                {
                    textFlow = new Tf2();
                    Object(textFlow).data = value;
                    
                    return textFlow;
                }
                
                // grid example
                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}
                ]);
                
                // loop through data and setup chart collections
                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>
    
    <!-- declarations -->
    <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>
    
    <!-- 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="Sparklines Description"
                                       description="The Ardisia Sparkline package includes small line charts, bar charts, and pie charts.&#13;&#13;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.&#13;&#13;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.&#13;&#13;'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.&#13;&#13;The height of the normal range will be determined by the 'autoNormalRangePercent' property if this property is true.&#13;&#13;'normalRangeMinY' and 'normalRangeMaxY' are only relevant if this property is false.&#13;&#13;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.&#13;&#13;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.&#13;&#13;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.&#13;&#13;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.&#13;&#13;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&#13;&#13;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.&#13;&#13;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.&#13;&#13;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.&#13;&#13;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&#13;&#13;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.&#13;&#13;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>