Welcome to My Blog!

This is Boxer Template Demo Site
Follow Me

GRAFIK LINGKARAN STATISTIK DARI DATA XML



By  Rhara Aslim     17.30    Label:, 
Salah satu contoh penggunaan Graph API pada flash yang dapat dimanfaatkan untuk statistik, antara lain menggambarkan grafik secara on-the-fly dari sebuah tabel data. Dari berbagai jenis grafik yang ada, grafik berbentuk lingkaran merupakan salah satu bentuk grafik yang populer digunakan.

Nilai data akan diambil dari sebuah file XML eksternal, berisi beberapa item dan nilai dari masing-masing item. Data dari masing-masing item ini, kemudian akan kita proses untuk diketahui nilainya, dibandingkan jumlah total keseluruhan, untuk kemudian ditampilkan dalam sebuah grafik lingkaran dengan besar sudut sesuai dengan persentasenya masing-masing.

1.
Buat sebuah file Flash baru dengan fitur ActionScript 3.0 dengan mengklik menu File – New …

2.
Setelah window pilihan New Document muncul, pilih opsi Flash File (ActionScript 3.0).

3.
Pada panel Properties tuliskan GrafikLingkaran di kolom Document Class. Bila mucul warning abaikan saja, karena definisi class ini akan kita buat nanti.

4.
Simpan file Flash ini, dengan cara mengklik menu File – Save as …

5.
Siapkan sebuah file XML yang akan di-load nantinya. Kita dapat membuatnya dengan menggunakan program Notepad. Misalkan isi file XML kita adalah berupa sebuah data statistik berupa 4 item yang mutually exclusive sehingga jumlah keempat item ini sama dengan jumlah sampel total:

<?xml version=”1.0” encoding=”utf-8” ?>
<items>
            <item>
                        <title>Bagian 1</title>
                        <value>30</value>
            </item>
            <item>
                        <title>Bagian 2</title>
                        <value>42</value>
            </item>
 <item>
                        <title>Bagian 3</title>
                        <value>18</value>
            </item>
<item>
                        <title>Bagian 4</title>
                        <value>10</value>
            </item>
</items>

 6.
Simpan file ini dengan nama data.xml pada folder yang sama dengan tempat kita menyimpan file FLA sebelumnya. Caranya, klik menu File – Save As pada Notepad, kemudian setelah muncul jendela pilihan, isikan data.xml pada kolom File name, dan All Files pada opsi Save as type.

7.
Buatlah sebuah file ActionScript external yang mendefinisikan class dokumen kita. Caranya, klik menu File – New … kemudian setelah window New Document muncul, pilih opsi ActionScript File.

8.
Tuliskan script berikut pada file ActionScript tersebut:

package
{
            import flash.display.MovieClip;
            import flash.events.Event;
            import flash.xml.XMLDocument;
            import flash.net.URLRequest;
            import flash.net.URLLoader;
            import flash.text.TextField;
            import flash.text.TextFormat;
           
            public class GrafikLingkaran extends MovieClip
            {                      
                        private var titles:Array = new Array();
                        private var values:Array = new Array();
                        private var xmlLoader:URLLoader = new URLLoader();
                        private var xmlData:XML = new XML();
                        private var colors:Array = [0xff0000, 0xff9900, 0xffff00, 0x00ff00, 0x0000ff, 0xff00ff, 0x330000, 0x003300, 0x000033, 0x333300, 0x330033];
                       
                        function GrafikLingkaran(){
                                    xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
                                    xmlLoader.load(new URLRequest("data.xml"));
                        }
                       
                        function LoadXML(e:Event):void {
                                    xmlData = new XML(e.target.data);
                                    buildPieChart(xmlData);
                        }
                       
                        function buildPieChart(xmlData:XML):void {
                                    var titleList:XMLList = xmlData.item.title;
                                    var valueList:XMLList = xmlData.item.value;
                                    var radians:Array = new Array();
                                    var totalValue:Number = 0;
                                   
                                    for each (var titleElement:XML in titleList) {
                                      titles.push(titleElement);
                                    }
                                    for each (var valueElement:XML in valueList) {
                                      values.push(valueElement);
                                     }

                                    for(var i:int = 0; i < values.length; i++) {
                                      totalValue = totalValue + Number(values[i]);
                                     }
                                    for(i =0; i < values.length; i++) {
                                      radians.push(Number(values[i])/totalValue*2);
                                     }
                                    drawlines(250, 250, 120, radians);
                        }
                       
                        function drawlines(centerx, centery, radius, radians) {
                                    var radiansSoFar:Number = 0;
                                    var piechart:MovieClip = new MovieClip();
                                    var colorkey:Number = 0;
                                    var coloralpha:Number = 1;
                                   
                                    piechart.x = stage.stageWidth/2;
                                    piechart.y = stage.stageHeight/2;
                                    stage.addChild(piechart);
                                    piechart.graphics.lineStyle(2, 0x000000);

                                    for(var i:int = 0; i < radians.length; i++) {
                                                piechart.graphics.beginFill(colors[colorkey], coloralpha);
                                                piechart.graphics.moveTo(0,0);
                                                piechart.graphics.lineTo(Math.sin(radiansSoFar*Math.PI)*radius, Math.cos(radiansSoFar*Math.PI)*radius);
                                                for(var n:Number = 0; n <= radians[i]; n += .0001) {
                                                            piechart.graphics.lineTo(Math.sin((radiansSoFar+n)*Math.PI)*radius, Math.cos((radiansSoFar+n)*Math.PI)*radius);
                                                }
                                                radiansSoFar += radians[i];
                                                piechart.graphics.lineTo(0,0);
                                                piechart.graphics.endFill();
                                                addLabel(radians[i], titles[i], radiansSoFar, radius, colors[colorkey], coloralpha);
                                                if(colorkey == colors.length-1) {
                                                  colorkey = 0;
                                                  coloralpha -= .25;
                                                } else {
                                                  colorkey += 1;
                                                }
                                    }
                        }

                        function addLabel(radians, itemtitle, radiansSoFar:Number, radius:Number, color, coloralpha) {
                                    var format:TextFormat = new TextFormat();
                                    var label:TextField = new TextField();
                                    var textRadians:Number = radiansSoFar-(radians/2);
                                    format.align = "left";
                                    format.font = "Verdana";
                                    format.size = 9;
                                    format.bold = true;
                                    label.width = 1;
                                    label.height = 1;
                                    label.autoSize = "left";
                                    label.antiAliasType = "advanced";
                                    label.text = itemtitle + " (" + Math.round((radians/2*100)).toString() + "%)";
                                    label.border = false;
                                    label.setTextFormat(format);
                                    label.x = (stage.stageWidth/2)+Math.sin(textRadians*Math.PI)*radius;
                                    label.y = (stage.stageHeight/2)+Math.cos(textRadians*Math.PI)*radius;
                                    if(textRadians > 0 && textRadians < .5) {
                                          label.y -= label.height/2;
                                          label.y += 10;
                                          label.x += 10;
                                    }
                                    if(textRadians > .5 && textRadians < 1) {
                                          label.y -= label.height/2;
                                          label.x += 10;
                                          label.y -= 10;
                                    }
                                    if(textRadians > 1 && textRadians < 1.5) {
                                          label.y -= label.height/2;
                                          label.x -= label.width;
                                          label.x -= 10;
                                          label.y -= 10;
                                    }
                                    if(textRadians > 1.5 && textRadians <= 2) {
                                          label.y -= label.height/2;
                                          label.x -= label.width;
                                          label.x -= 10;
                                          label.y += 10;
                                    }
                                    if(textRadians == 0 || textRadians == 2) {
                                          label.y += 10+label.height/2;
                                    }
                                    if(textRadians == .5) {
                                          label.x += 10+label.width/2;
                                    }
                                    if(textRadians == 1) {
                                          label.y -= 10+label.height/2;
                                    }
                                    if(textRadians == 1.5) {
                                          label.x -= 10+label.width/2;
                                    }
                                    stage.addChild(label);
                        }
            }
}

9.
Klik menu File – Save as.., simpan file ini dengan nama GrafikLingkaran.as, pada folder yang sama dengan tempat kita menyimpan file Flash sebelumnya.

10.
Kembali ke file Flash, lakukan Test Movieclip untuk melihat hasilnya. Klik menu Control – Test Movie.

11.
Jika sukses, maka data dari file XML yang kita buat akan diproses, dan kemudian ditampilkan berupa grafik lingkaran statistik seperti pada gambar.


download source code nya.

Sumber: PC MILD edisi 22/2010 hlm.35

About Rhara Aslim

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod diam at commodo sagittis. Nam id molestie velit. Nunc id nisl tristique, dapibus tellus quis, dictum metus. Pellentesque id imperdiet est.

Tidak ada komentar:

Posting Komentar