<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:sparkline="sparkline.*"
    xmlns:degrafa="http://www.degrafa.com/2007" 
    layout="absolute" 
    creationComplete="generateData()" viewSourceURL="srcview/index.html" >
    
    
    <mx:Style source="styles.css" />
    
    <mx:Script>
        <![CDATA[
            import flash.sampler.Sample;
            import mx.collections.ArrayCollection;
            
            [Bindable]
            private var dataCollection : ArrayCollection = new ArrayCollection();
            
            private function generateData() : void
            {
                dataCollection.removeAll();
                for ( var x : int = 0; x < 50; x ++ )
                {
                    dataCollection.addItem( Math.random() * 10 );
                } 
                dataCollection.refresh();
            }
            
        ]]>
    </mx:Script>
    
    
    <mx:ApplicationControlBar dock="true">
        
        <mx:Button label="Generate Sparkline Data" click="generateData()" top="10" left="10" useHandCursor="true" buttonMode="true"  />
        
    </mx:ApplicationControlBar>
    
    <sparkline:Sparkline
        dataProvider="{ dataCollection }"
        height="100"
        left="10"
        right="10"
        top="10"
        minimum="0"
        maximum="10">
        
        <sparkline:lineStroke>
            <degrafa:SolidStroke color="#000000" />
        </sparkline:lineStroke>
        
    </sparkline:Sparkline>
    
    <sparkline:Sparkline 
        dataProvider="{ dataCollection }"
        height="100"
        left="10"
        right="10"
        top="130"
        minimum="0"
        maximum="10">
        
        <sparkline:backgroundFill>
             <degrafa:RadialGradientFill    angle="45" focalPointRatio=".5">
                <degrafa:GradientStop         alpha=".3" ratio=".5" color="#62ABCD" />
                <degrafa:GradientStop         alpha=".8" ratio="1" color="#FFFFFF" />
            </degrafa:RadialGradientFill>
        </sparkline:backgroundFill>
        
        <sparkline:borderStroke>
            <degrafa:SolidStroke color="#000000" weight="1" />
        </sparkline:borderStroke>
        
        <sparkline:lineStroke>
            <degrafa:SolidStroke color="#000000" weight="3"/>
        </sparkline:lineStroke>
        
    </sparkline:Sparkline>
    
    
    <sparkline:Sparkline 
        dataProvider="{ dataCollection }"
        height="100"
        left="10"
        right="10"
        top="250"
        minimum="0"
        maximum="10">
        
        <sparkline:backgroundFill>
              <degrafa:BitmapFill source="@Embed('assets/metal.png')" rotation="45" smooth="true"/>
        </sparkline:backgroundFill>
        
        <sparkline:borderStroke>
            <degrafa:LinearGradientStroke angle="90" weight="2">
                <degrafa:GradientStop  ratio="0" color="#000000"/>
                <degrafa:GradientStop  ratio="1" color="#FFFFFF"/>
            </degrafa:LinearGradientStroke>
        </sparkline:borderStroke>
        
        
        <sparkline:lineStroke>
             <degrafa:LinearGradientStroke   angle="90" weight="3">
                <degrafa:GradientStop  ratio="0" color="#00FF00"/>
                <degrafa:GradientStop  ratio=".5" color="#FFFF00"/>
                <degrafa:GradientStop  ratio="1" color="#FF0000"/>
            </degrafa:LinearGradientStroke>
        </sparkline:lineStroke>
        
    </sparkline:Sparkline>
    
    
</mx:Application>