Chart with Flex

ในงานล่าสุด UI element ต้องมีการแสดง chart ด้วย
โดยเป็น chart ที่มีลักษณะเป็น dynamic, control จาก javascript ได้
ตอนแรก ก็ใช้ plotkit ซึ่งเป็น opensource
แต่พอเอาไปให้ user ดู ก็เจอติเรื่องความสวยงาม
ซึ่งจริงๆถ้ามีเวลา ก็อาจจะไล่แก้โปรแกรม plotkit ทำสวยได้
แต่เมื่อไม่มีเวลา ก็เลยหาโอกาสเสียตังค์ลองใช้ flex ดู

ความรู้สึกหลังจากได้ทดลองพัฒนา component ดู
พบว่า
1. mxml ดีกว่าที่คิดไว้เยอะ
2. model การ binding parameter ของ component ก็งามดี
3. actionscript เขียนง่ายมาก, ถ้ามี background java + javascript
ก็น่าจะผ่านฉลุย
4. api library ออกแบบไว้ดี, ชอบที่เราสามารถ customize nature ของ widget
ได้ด้วยโดยการ pass customize function เข้าไปเป็น parameter (callback)
5. การ integrate กับ javascript ผ่านทาง ExternalInterface ก็ง่ายดาย
6. ถ้าใช้ SDK พัฒนา จะเบื่อกับ build time ที่นานเหลือเกิน (เดี๋ยวนี้ไม่กี่ิวิ ก็เริ่มทนไม่ได้แล้ว)
7. flex builder มันใช้ eclipse เป็นฐาน, ความคุ้นเคยต่างๆ ก็เลยเต็มร้อย

หน้าตาของ component ที่ทำออกมา



ตัวอย่าง javascript ที่ใช้ provide ข้อมูลให้ chart component

document.chart.setBaseAtZero(true);
datas = [{Year: 2005, ROE: 1000, Revenue: 200},
         {Year: 2006, ROE: 500,  Revenue: 300},
         {Year: 2007, ROE: 300,  Revenue: 1000}];

series = [{name: "ROE", displayName: "ROE"},
          {name: "Revenue", displayName: "Revenue"}];

document.chart.loadChart("Compare", datas, series, "Year");

ส่วนอันนี้คือ mxml ที่เขียน
​

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initApp()" 
        paddingLeft="0"
        paddingBottom="0"
        paddingRight="0"
        paddingTop="0">

    <mx:Script>
        <![CDATA[
        import mx.charts.CategoryAxis;
        import mx.charts.series.ColumnSeries;
        import mx.charts.chartClasses.IAxis;
                
        public function initApp():void {
                if (ExternalInterface.available) {
                        ExternalInterface.addCallback("loadChart", loadChart);
                        ExternalInterface.addCallback("setBaseAtZero", setBaseAtZero);
                        ExternalInterface.addCallback("setLabelPrecision", setLabelPrecision);
                }
        }
        
        private function setLabelPrecision(value:int):void {
                numberFormatter.precision = value;
        }
        
        private function setBaseAtZero(value:Boolean):void {
                linearAxis.baseAtZero = value;
        }
            
        private function loadChart(description:String, datas:Array, maps:Array, category:String):void {
                panel.title = description;
                var mySeries:Array = new Array();
                for each (var obj:Object in maps) {
                        var ss:ColumnSeries = new ColumnSeries();
                        ss.xField = category;
                        ss.yField = obj.name;
                        ss.displayName = obj.displayName;
                        mySeries.push(ss);
                }       
                
                myChart.series = mySeries;
                
                var cat:CategoryAxis = new CategoryAxis();
                cat.categoryField = category;
                myChart.horizontalAxis = cat;
                
                myChart.dataProvider = datas;
                
        }                 
        
        private function labelFunction(labelValue:Object, previousValue:Object, axis:IAxis):String {
                return numberFormatter.format(labelValue);
        }
        ]]>
        
        

    </mx:Script>

    <mx:NumberFormatter id="numberFormatter" precision="0"
        useThousandsSeparator="true" useNegativeSign="true"/>
        
    <mx:Panel id="panel" title="ColumnChart and BarChart Controls Example" 
        height="100%" width="100%" layout="horizontal">
        
        <mx:ColumnChart id="myChart" height="100%" width="80%" 
            paddingLeft="5" paddingRight="5" 
            showDataTips="true" >            
    
            <mx:verticalAxis>
                <mx:LinearAxis id="linearAxis" baseAtZero="true" labelFunction="labelFunction"/>
            </mx:verticalAxis>
                   
        </mx:ColumnChart>

        <mx:Legend dataProvider="{myChart}" width="20%" />   
              
    </mx:Panel>
</mx:Application>

User confirm เมื่อไร ก็เตรียมเสียตังค์ 900 เหรียญ