• Article
|
• Edit
|
• History

Save this to a file on your hard disk, name it with .mxml sufix and compile with the Adobe Flex compiler, then you can attach the resulting SWF file to the scontrol mentioned in the article

<?xml version="1.0" encoding="utf-8"?>
<!-- 
	Source for the MXML file 
     Simple example to demonstrate the PieChart control.
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

	<fab:FABridge xmlns:fab="bridge.*" /> <!-- flex ajax bridge  -->
 
    <mx:Script>
        <![CDATA[
 		/* as much as possible controllig logic is found in the javascript s-control
 		 * this file is primarily for User interface elements 
 		 */ 
        import mx.collections.ArrayCollection;
        import mx.controls.Alert; 
  		import mx.controls.*;
        import mx.charts.*;
        import mx.charts.series.*;
        import mx.charts.effects.*;
            		
		/* set labels from the data 
		 * this one call back was needed until i can figure out how to return a string
		 * from JS across the bridge, could be a bug in the bridge?
		 */
		private function getWedgeLabel(item:Object, arg2:String, arg3:Number, arg4:Number):String
		{
			var result:String = ExternalInterface.call("pieSetLabel", item,arg2,arg3,arg4);
			return result==null?"":result;
		}
 		
        ]]>
    </mx:Script>

	<mx:SeriesInterpolate id="interpolator" elementOffset="10"/>

	<mx:HDividedBox width="100%" height="100%">	
		<mx:Panel id="panel" title="Please wait ..." height="100%" width="100%">
	
        <mx:PieChart id="chart" 
        	height="100%" width="100%"
            paddingRight="5" 
            paddingLeft="4" 
            showDataTips="true" > 
            
            <mx:series>
                <mx:PieSeries id="chart_series"
                	labelPosition="callout" 
                	labelFunction="getWedgeLabel">
                	
                	<!-- specify the label decor -->
                    <mx:calloutStroke>
                        <mx:Stroke weight="0" color="0x888888" alpha="100"/>
                    </mx:calloutStroke>
                    <mx:radialStroke>
                        <mx:Stroke weight="0" color="#FFFFFF" alpha="20"/>
                    </mx:radialStroke> 
                    <mx:stroke>
                        <mx:Stroke color="0" alpha="20" weight="2"/>
                    </mx:stroke>
                    
                	<!-- mx:fills does the cool color gradients -->
					<mx:fills>
						<mx:Array>
							<mx:RadialGradient>
								<mx:entries>
									<mx:Array>
										<mx:GradientEntry color="#EF7651" ratio="0"/>
										<mx:GradientEntry color="#994C34" ratio="1"/>
									</mx:Array>
								</mx:entries>
							</mx:RadialGradient>
							<mx:RadialGradient>
								<mx:entries>
									<mx:Array>
										<mx:GradientEntry color="#E9C836" ratio="0"/>
										<mx:GradientEntry color="#AA9127" ratio="1"/>
									</mx:Array>
								</mx:entries>
							</mx:RadialGradient>
							<mx:RadialGradient>
								<mx:entries>
									<mx:Array>
										<mx:GradientEntry color="#6FB35F" ratio="0"/>
										<mx:GradientEntry color="#497B54" ratio="1"/>
									</mx:Array>
								</mx:entries>
							</mx:RadialGradient>
							<mx:RadialGradient>
								<mx:entries>
									<mx:Array>
										<mx:GradientEntry color="#A1AECF" ratio="0"/>
										<mx:GradientEntry color="#47447A" ratio="1"/>
									</mx:Array>
								</mx:entries>
							</mx:RadialGradient>
							<mx:RadialGradient>
								<mx:entries>
									<mx:Array>
										<mx:GradientEntry color="#BA9886" ratio="0"/>
										<mx:GradientEntry color="#AE775B" ratio="1"/>
									</mx:Array>
								</mx:entries>
							</mx:RadialGradient>
						</mx:Array>
					</mx:fills>
					
                </mx:PieSeries>
            </mx:series>
        </mx:PieChart>

    	</mx:Panel>
    
    	<mx:ColumnChart id="ColumnChart" 
			width="100%" height="100%" 
			showDataTips="true" >
	
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="Name"/>
			</mx:horizontalAxis>

			<mx:series>
					<mx:ColumnSeries showDataEffect="{interpolator}">
<!--
						<mx:fill>
							<mx:LinearGradient>
								<mx:entries>
									<mx:Array>
										<mx:GradientEntry color="#C6D5DD" ratio="0" alpha="100"/>
										<mx:GradientEntry color="#336699" ratio="0.1" alpha="100"/>
										<mx:GradientEntry color="#24496D" ratio="0.9" alpha="100"/>
										<mx:GradientEntry color="#000000" ratio="1" alpha="100"/>
									</mx:Array>
								</mx:entries>
							</mx:LinearGradient>
						</mx:fill>
-->
					</mx:ColumnSeries>
			</mx:series>
					
			<mx:backgroundElements>
				<mx:Array>
					<mx:GridLines direction="both">
						<mx:verticalStroke>
							<mx:Stroke weight="1" color="#CCCCCC"/>
						</mx:verticalStroke>
					</mx:GridLines>
				</mx:Array>
			</mx:backgroundElements>	
		</mx:ColumnChart>

	</mx:HDividedBox>
</mx:Application>