Menggunakan Charting Komponen (Basic of Column Chart)

Sudah pernah bikin char ?. mudah ko’

Ya’ setidaknya dasarnya mudah untuk dipelajari. Kali ini kita akan mencoba membuat chart yang sangat simple dan tidak terlalu berlebihan, (^_^)

a

Seperti gambar diatas ini, adalah contoh chart yaitu ColumnChart.

Flex menyediakan 10 buah komponen char yang berbeda sesuai tampilan dan fungsinya. Kali ini kita akan mencoba menggunakan komponen charting yaitu ColumnChart.

Seperti biasa, buatlah projek baru. Kemudian masukkan ColumnChart kedalam Application dengan cara mendrag kedalam layar Design.

(Klik pada Gambar ! )

Akan muncul layar seperti dibawah ini

Anda diminta memasukkan ID dari ColumnChart serta Series Elements.

Kita asumsikan

ID :

        chart 

Series elements :

        2005

        2006

        2007

        2008

Jika sudah maka tampilan anda akan sama seperti dibawah ini :

Klik OK.

 (Klik pada Gambar ! )

Jangan terpaku dari gambar yang anda lihat di Design Mode. Oleh karena itu beralihlah ke Source Mode. Oh iya, cobalah untuk menaruh ColumnSeries kedalam Panel.

Berhubung kita akan menggunakan Array sebagai penampung data dari nilai-nilai yang akan ditampilkan oleh Chart, maka kita harus mengimport

import mx.collections.ArrayCollection;

jangan lupa menaruhnya di dalam

<mx:Script>

<![CDATA[

    import mx.collections.ArrayCollection;

]]>

</mx:Script>

Jika sudah, maka kita harus membuat 4 buah ArrayCollection untuk menampung Series yag sudah kita buat sebelumnya, yaitu 2005,2006,2007,2008.

Untuk asumsi, kita akan membuat data dari Jan, Feb, Mar, Apr. sehingga setiap ArrayCollection akan memiliki 4 Bulan.

Seperti berikut :

[Bindable]

public var untung01:ArrayCollection = new ArrayCollection([

{Month:"Jan", Profit:2200},

{Month:"Feb", Profit:1400},

{Month:"Mar", Profit:1900},

{Month:"Apr", Profit:2300}

]);

Buatlah 4 buat ArrayCollection dengan id :

untung01, untung02, untung03, untung04

untuk nilai dari Profit, silahkan rubah agar tidak sama.

Jika sudah saatnya kita kembali ke MXML.

Agar ColumnChart bisa mendapatkan nilai yang telah dibuat sebelumnya, maka kita harus menambah atribut didalamnya

dataProvider="{untung01}"

dengan begitu maka ColumnChart akan mendapatkan data dari ArrayCollection yang telah kita buat.

Agar ColumnChart mengetahui dan bisa menangkan value dari Axis (Horizontal Axis) maka kita harus menambahkan didalam tag ColumnChart sebagai berikut :

<mx:horizontalAxis>

    <mx:CategoryAxis categoryField="Month"/>

</mx:horizontalAxis>

dari kode diatas kita bisa mengetahui bahwa Horizontal Axis akan mengambil value dari Month, yaitu “Jan”, ”Feb”, ”Mar”, “Apr”.

untuk membuat setiap Bar mendapatkan value dari ArrayCollection, maka kita akan menambahkan beberapa atribut pada ColumnSeries, yaitu :

 
    dataProvider="{untung01}"

    yField="Profit"

    xField="Month"

perlu diingat bahwa kita mempunyai 4 ColumnSeries, maka kita haruslah menyesuaikan setiap dataProvider-nya.

Ada satu hal yang tertinggal, yaitu Legend. Yang dimaksud legend disini adalah semacam index yang memberitahukan mengenai Data yang diampilkan. Dalam hal ini akan muncul Tahun sekaligus warnannya.

Tambahkan legend didalam Panel dan dibawah ColumnChart

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

mmm, apa lagi yah ?

rasanya sudah !

(^_^)

 (Klik pada Gambar ! )

Hem, gimana ?

Mudah kan !