Sunday, July 01, 2007

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 เหรียญ

Related link from Roti

8 comments:

bow_der_kleine said...

แหมอ่านมาตั้งแต่ต้นกำลังจะเคลิ้มสนใจ Flex แล้วครับ แต่พออ่านบรรทัดสุดท้านเข้า ถึงกับร้องจ้าก ... แหม แพงใช่ย่อยเลยครับ

Mk said...

ตอนนี้เล่น Silverlight กับ Flex เทียบกันอยู่ ก็ประทับใจ ecosystem ของ Flex พอสมควร แบบว่าครบครันดี

ข้อเสียก็คงว่ามันเป็นเทคโนโลยีปิดของ Adobe หัดเขียน MXML/ActionScript เป็นแล้วไม่ได้ประโยชน์อื่น หัด XAML/C# ดูจะใช้ได้กว้างกว่า

wiennat said...

แต่ผมตาม link เข้าไปดู plotkit ก็สวยดีนี่ครับ

polawat phetra said...

bow: ผมใช้ opensource มาตลอด, รู้สึกว่าแพงเหมือนกัน, แต่ก็กัดฟันซื้อ เผื่อว่าในอนาคต จะมาช่วยให้ app ดูไฮโซมากขึ้น

mk: mark คุณมีข้อได้เปรียบตรง ยังไม่ได้คุ้นเคยกับค่ายไหนจริงๆจังๆ, ลองเปรียบเทียบในแง่ของ concept ของ การ programming สิว่า คุณ get Idea ของทางค่ายไหนเร็วกว่ากัน, และทำไมถึงเร็วกว่า?

wiennat: ผมก็ว่า plotkit มันสวยแล้วเหมือนกัน
,ที่เอา adobe มาใช้ นี่ก็กะจะเอาชื่อบริษัทฯ มากดดันให้ user
ยอมรับความสวยของมัน

pa said...

ผมเคยเห็น dojo มี module ที่ใช้ทำ chart อยู่ด้วย ยังคิดอยู่ว่าถ้ามีโอกาศ จะลองเอามาใช้ดู

http://ajaxian.com/archives/dojo-charting-engine-released

polawat phetra said...

pa: ขอบคุณครับ
ลืมเล่าไปว่า ก่อนที่จะมาใช้ plot kit
ก็ลองใช้ dojo chart มาก่อน
แต่ก็จำไม่ได้แล้วว่า ทำไมไม่เอา

เอี้ยก้วย ณ แอนฟิลด์ said...

แนะนำ FusionCharts Free เป็นอีกทางเลือกนึงครับ

http://choopong.wordpress.com/2007/05/21/fusioncharts-free/

Tanakorn Numrubporn said...

fusion charts เป็น real time chart ที่ตอนนี้ยังฟรี และดูสวยกว่า chart component ของ flex เสียอีกครับ (ตามความเห็นส่วนตัวครับ)

http://www.fusioncharts.com/flex/Default.asp

ยังมี opensource อีกตัวครับที่เน้น effect และความสวยงาม Flare

http://flare.prefuse.org/demo

แค่นี้ก็คงไม่ต้องง้อ chart component แล้วล่ะครับ

แล้วเท่านี้เราก็น่าจะใช้ Flex ในแบบ Opensource ได้ 100% จริงๆ