source

chart.mxml (main)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="220"
                    backgroundColor="#FFFFFF" creationComplete="init(event)" xmlns:comp="component.*">
    <comp:RadarChart id="radarchart" />
    <mx:Script>
        <![CDATA[
            import mx.rpc.http.HTTPService;
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.events.FaultEvent;
            import mx.controls.Alert;
            
            private function init(e:Event):void{
                //Request URL will be provided by external FlashVars
                var parameters:Object = Application.application.parameters;
                
                var req:HTTPService = new HTTPService();
                req.url = parameters.url;
                req.send();
                req.addEventListener(ResultEvent.RESULT, onResult);
                req.addEventListener(FaultEvent.FAULT, onFault);
            }
            
            private function onResult(e:ResultEvent):void{
                radarchart.ac = e.result.grades.grade;
                e.target.removeEventListener(ResultEvent.RESULT,onResult);
                e.target.removeEventListener(FaultEvent.FAULT,onFault);
            }
            
            private function onFault(e:FaultEvent):void{
                Alert.show("Could not load the data","Error");
                e.target.removeEventListener(ResultEvent.RESULT,onResult);
                e.target.removeEventListener(FaultEvent.FAULT,onFault);
            }
        ]]>
    </mx:Script>
</mx:Application>

component.RadarChart.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            import mx.collections.ArrayCollection;
            import mx.controls.Text;
            import component.GraphBody;
        
            //Radial size of the graph in pixel
            private const RAD_MAX:Number = 70;
            
            //Maximum score along each axis of the graph
            private const SCORE_MAX:Number = 10;
            
            //Color filling the chart
            private const COLOR_BODY:uint = 0x00FFFF;
            
            //Color of axes
            private const COLOR_AXIS:uint = 0x999999;
            
            //For setting score data in the xml format
            private var _ac:ArrayCollection;
            
            public function set ac(obj:Object):void{
                _ac = obj as ArrayCollection;
                drawGraph(100,100);
                drawLabel(100,100);
            }
            
            /**
             * Draw graph components
             * 
             * @centerX        Number        X-position of the chart
             * @centerY        Number        Y-position of the chart
             */ 
            private function drawGraph(centerX:Number,centerY:Number):void{    
                var graph:GraphBody = new GraphBody(_ac);
                graph.draw(RAD_MAX,SCORE_MAX,COLOR_BODY,COLOR_AXIS);
                addChild(graph);
                graph.x = centerX;
                graph.y = centerY;
            }
            
            /**
             * Draw labels along axes 
             * 
             * @centerX        Number        X-position of the chart
             * @centerY        Number        Y-position of the chart
             */
            private function drawLabel(centerX:Number,centerY:Number):void{
                var radian:Number = 2*Math.PI/_ac.length;
                
                for (var i:int=0; i<_ac.length; i++){
                    var theta:Number = i*radian;
                    var t:Text = new Text();
                    t.text = _ac[i].label;
                    addChild(t);
                    t.x = centerX + (RAD_MAX + 10) * Math.cos(theta);
                    t.y = centerY + (RAD_MAX + 10) * Math.sin(theta);
                }
            }
        ]]>
    </mx:Script>
</mx:Canvas>

component.GraphBody.as

package component{
    import mx.collections.ArrayCollection;
    import mx.containers.Canvas;
    
    internal class GraphBody extends Canvas{
        private var _ac:ArrayCollection;
        
        public function GraphBody(obj:Object){
            _ac = obj as ArrayCollection;
        }
        
        /**
         * Draw a chart
         * 
         * @param     rMax        Number        Radial size of the chart in pixel
         * @param     sMax        Number        Maximum score along each axis of the graph
         * @param     colBody        uint        Color filling the chart
         * @param     colAxis     uint        Color of axes
         */
        public function draw(rMax:Number,sMax:Number,colBody:uint=0x00FFFF,colAxis:uint=0xFFFFFF):void{
            var radian:Number = 2*Math.PI/_ac.length;
            var rStart:Number = _ac[0].score * rMax / sMax;
            
            graphics.beginFill(colBody,0.5);
            graphics.moveTo(0, 0);
            
            for (var i:int=0; i<_ac.length; i++){
                var r:Number = _ac[i].score * rMax/sMax;
                var theta:Number = i*radian;
                graphics.lineTo(r*Math.cos(theta), r*Math.sin(theta));
                
                var axis:GraphAxis = new GraphAxis(rMax,5,colAxis);
                axis.rotation = theta*180/Math.PI;
                addChild(axis);
            }
            graphics.lineTo(rStart*Math.cos(0), rStart*Math.sin(0));
            graphics.endFill();
            drawOutline(rMax,colAxis);
        }
        
        /**
         * Draw outline of the chart (e.g., pentagon)
         * 
         * @param     rMax    Number        Radial size of the chart in pixel
         * @param     color     uint        Color of the outline
         */ 
        private function drawOutline(rMax:Number, color:uint):void{
            var radian:Number = 2*Math.PI/_ac.length;
            graphics.lineStyle(0,color);
            graphics.moveTo(rMax*Math.cos(0), rMax*Math.sin(0));
            for (var i:int=0; i<_ac.length; i++){
                var theta:Number = i*radian;
                graphics.lineTo(rMax*Math.cos(theta), rMax*Math.sin(theta));
            }
            graphics.lineTo(rMax*Math.cos(0), rMax*Math.sin(0));
        }
    }
}

component.GraphAxis.as

package component{
    import mx.core.UIComponent;
    
    internal class GraphAxis extends UIComponent{
        
        //Size of a tic along the axis
        private const TIC_WIDTH:Number = 2;
        
        /**
         * Add an axis to a vertex of a radarchart
         * 
         * @param     length        Number     Radial length of the axis
         * @param     scaleNum    int        Number of scaler on the axis
         * @param     color        uint    Color of the axis
         */
        public function GraphAxis(length:Number,scaleNum:int,color:uint=0xFFFFFF){
            draw(length,scaleNum,color);
        }
        
        private function draw(len:Number, scl:int, c:uint):void{
            graphics.lineStyle(1, c);
            graphics.moveTo(0,0);
            graphics.lineTo(len,0);
            
            var dif:Number = len/scl;
            
            for (var i:int=1; i<scl; i++){
                graphics.moveTo(dif*i, -TIC_WIDTH);
                graphics.lineTo(dif*i, TIC_WIDTH);
            }
        }
    }
}