Flex Cizge (Chart) Turleri

Flex, elimizdeki verileri siniflandirmamiz ve analiz surecimizi kolaylasmak icin cizge araclarini barindirir. RIA uygulamalarinin olmazsa olmazlari arasinda yer alan ve kullaniciya Web ortaminda en anlasilir bicimde veriyi sunan bir cozumdur cizge. Ornegin, Microsoft Excel kullanicilari tamamladiklari isleri, hazirladiklari istatistikleri, masaustunde Excel cizgeleri ile sunarlar. Ayni deneyimi Flex ile yasamak mumkun mudur? Tabi ki evet. Programlanmasi son derece kolay bu grafik nesnelerinden bu yazimda bahsetmeye calisacagim ve amacim hangi ortamda Web uygulamasi gelistirirseniz gelistirin (PHP, Java, .NET vb) cizgeleri, eger gerekiyorsa, mutlaka uygulamaniza "gömün".

1. Genel olarak yapilan isler

a) Yatay eksene "x", dusey eksene "y" ekseni adi verilir.

[Sekil 1: Eksenler]

b) Cizgeyi (chart) beslemek icin en az bir "dataprovider" kaynagina ihtiyaciniz vardir. Bazen bir cizgede birden fazla bilgi(cizge) gostermek istediginizde, o cizgenin de dataprovider kaynagini ayrica belirtmeniz gerekir.

Ornek kod (Yeryuzunun farkli iki yarim kure bilgisi ayni grafikte);

 <mx:LineSeries
                xField="yil"
                yField="degisim"
                displayName="Degisim Miktari ('C)"
        dataprovider="{KuzeyYarimKure}"
        >
           </mx:LineSeries>
           <mx:LineSeries
                xField="yil"
                yField="degisim"
                displayName="Degisim Miktari ('C)"
        dataprovider="{GuneyYarimKure}"
        >
 </mx:LineSeries>

c) "Legend" (kenar bilgisi) eklemeniz de mumkun:

Ornek Kod:

 
<mx:Legend dataProvider="{sicaklikChart}"/> 

Daha baska ozellikler de var ancak bunlar baslangic seviyesi icin yeterli olacaktir.

2. Cizge Turleri

Dokuz adet cizge turu bulunmakta. Bunlarin her birinin nasil kullanildigini gostermek isterdim ama bir makale icin cok fazla bilgi olurdu. Bu nedenle en cok kullanilanlarinin neye benzediklerini gostericem ve iclerinden sansli biriyle bir ornek yapicam.

[Sekil 2 – Ornek cizgeler]

3. Ornek

Kuresel isinma uzerine dusuncelere daldigim, haftada bir iki belgesel izledigim su gunlerde sizler icin usenmedim NASA nin web sitesinden bazi verileri inceledim. Kuzey yarimkurenin yuzeyinin son 10 yildaki sicaklik degisimlerinin ortalama degerlerini gostermek istedim. Yuzey degerleri icin cok farketmese de, izledigim bir belgeselde kuresel isinmanin yillik +4 derece arttigini ve Dunyamizin buna yasayan bir organizma gibi karsilik verdigini izledim. Kasirgalar, siklonlar vb felaketler, deniz seviyesindeki yukselis ve artan CO2 miktari. Biraz tasarruf ve bol bol geri donusum yapabilecegimiz en kolay katkilar..

Asagidaki ornekle de bir LineChart cikarttim.

[Sekil 3]

Aciklama

Altinci satirda ornekte kullanacagimiz veriyi hazirliyoruz. Bu veriyi sunucu tarafindan XML olarak ya da AMF formatinda getirmeniz gunluk hayatta karsilacaginiz asil yontem. Hic farketmez, ikisi de ayni sey.

24. satirda LineChart tanimimiza basladigimizi belirtiyoruz. 29 ve 32. satirlarda eksen tanimlarimizi yapiyoruz. Ondan once 25. satirdaki dataProvider tanimina da dikkat edelim.

35. satir, seri halde verilerimizi koydugumuz bolum. 37. satirda ‘x’ ekseninde ‘yil’ alanina gore kurmasini; ‘y’ ekseninde ise ‘degisim’ degerlerini koymasini soyluyoruz. Ardindan dataProvider’a gore gerekli haritalamayi (anahtar-deger kurulumu) Flex kendisi yapiyor.

43. satirda da kenar bilgisi yani ‘Legend’ ekliyoruz.

4. Sonuc

[Sekil 4 – Son Gorunum]

Flex Cizge bilesenleri (Flex Charting Components), uygulamalarimizda analiz ve veri dagilimlarini gostermede buyuk kolaylik saglamakta ve kullanicilarin buyuk bir ihtiyacini karsilamaktadir.

Konuyla ilgili soru ve gorusleriniz icin sbozdag@gmail.com adresinden bana yazabilir ya da MMIstanbul soru-cevap bolumunde sorularinizi ve deneyimlerinizi paylasabilirsiniz.