Page Nav

HIDE

Grid

GRID_STYLE

Breaking News

latest

Membuat Pie Chart dengan PHP

Pie chart adalah gambar lingkaran yang dibagi-bagi menjadi beberapa bagian yang masing-masing menunjukkan persentase dari sebuah pengolaha...


Pie chart adalah gambar lingkaran yang dibagi-bagi menjadi beberapa bagian yang masing-masing menunjukkan persentase dari sebuah pengolahan data. Bentuk ini menyerupai kue bundar yang dipotong-potong, itulah sebabnya mengapa disebut "pie" chart. Pie chart merupakan bentuk pemaparan olahan data yang cukup disukai selain bentuk balok. Memang penyajian dalam bentuk visual memiliki nilai lebih daripada kita memelototi angka-angka saja. Bikin pusing.
 
Komposisi luas masing-masing bagian potongan pie chart sesuai dengan persentase data yang diwakilinya. Bukan cuma luasnya saja yang sesuai, tetapi lebar sudut ataupun panjang keliling masing-masing potongan juga sesuai dengan perbandingan persentase data yang diwakilinya. Nah, yang akan digunakan sebagai pegangan dalam menggambar pie chart dengan PHP adalah komposisi lebar sudut masing-masing bagian pie. Langkah membuat pie chart dengan PHP adalah sebagai berikut:
 
Mula-mula diambil persentase dari masing-masing data yang akan disajikan, kemudian persentase tersebut dibulatkan dan dikonversikan menjadi derajat (100% adalah 360 derajat). Kemudian digambar sejumlah lingkaran dengan titik pusat sama, tetapi kelilingnya saling bersambung satu sama lain dan panjangnya sesuai dengan persentase yang telah ditentukan sebelumnya. Langkah berikutnya adalah menggambar garis dari titik pusat lingkaran menuju ke batas keliling setiap bagian. Koordinat pangkal garis sama dengan koordinat titik pusat lingkaran, sedangkan koordinat ujung garis ditentukan dengan menggunakan perhitungan matematis.
 
Pada gambar tersebut, ada sebuah lingkaran dengan jari-jari r dan pusat di (a,b) yang nilai a dan b telah diketahui. Ada sebuah potongan di dalamnya yang membentuk sudut . Untuk mencari koordinat (x,y) maka diperlukan bantuan rumus trigonometri sin dan cos. Panjang garis putus-putus adalah r sin, sedangkan panjang garis mendatar dari titik pusat sampai ke perpotongan dengan garis putus-putus adalah r cos. Jadi nilai x adalah a + (r cos) dan nilai y adalah b + (r sin). Anda tidak perlu dipusingkan dengan arah koordinatnya (misalnya ke kiri adalah negatif dan ke kanan adalah positif) karena nilai sin dan cos akan menyesuaikan dengan sendirinya sesuai dengan besar sudut. Pada PHP, rumus tersebut perlu sedikit disesuaikan, karena koordinat harus selalu berupa integer. Dengan demikian, nilai r sin dan r cos harus selalu dibulatkan. Selain itu nilai derajat juga dikonversikan ke radian.
 
Yang terakhir adalah memberi warna pada tiap bagian pie chart yang telah terbentuk. Untuk memberi warna, mula-mula harus dicari koordinat sebuah titik yang terletak di dalam setiap bagian pie chart sebagai titik awal pewarnaan. Mudahnya, titik tersebut dicari dengan membagi dua sudut sebuah bagian pie, kemudian diambil panjang setengah jari-jari pie, sehingga titik tersebut akan terletak di tengah suatu bagian pie. Titik t adalah titik tengah suatu bagian pie.
 
Nah, teori pembuatan pie chart di atas jika dibahasakan dengan skrip PHP adalah sebagai berikut:

<?php
Header("Content-Type:image/jpeg");
// --- menentukan data yang akan dibuat pie chartnya --- //
$data[0] = 24;
$data[1] = 41;
$data[2] = 32;
$data[3] = 49;
$data[4] = 37;
// --- deklarasi variabel --- //
$total = 0;
$d = array();
$kor_x = array();
$kor_y = array();
$t_x = array();
$t_y = array();
// --- menentukan besar sudut setiap bagian pie --- //
for($j=0;$j<=4;$j++) {
    $total += $data[$j];
}
$d[0] = 0;
for($i=1;$i<=5;$i++) {
    $d[$i] = ($data[$i-1]/$total) * 360;
    $d[$i] += $d[$i-1];
}
// --- menentukan warna --- //
$img = ImageCreate(300,300);
$warna[0] = ImageColorAllocate($img,0,255,0);
$warna[1] = ImageColorAllocate($img,255,0,0);
$warna[2] = ImageColorAllocate($img,0,0,255);
$warna[3] = ImageColorAllocate($img,255,0,255);
$warna[4] = ImageColorAllocate($img,255,255,0);
$hitam = ImageColorAllocate($img,0,0,0);
$putih = ImageColorAllocate($img,255,255,255);
ImageFill($img,0,0,$putih);
// --- membentuk pie --- //
for($k=1;$k<=5;$k++) {
// --- menggambar bagian-bagian pie --- //
ImageArc($img,150,150,250,250,$d[$k-1],
$d[$k],$hitam);
    // --- mencari koordinat batas --- //
    $kor_x[$k] = round(150+(125*cos(deg2rad($d[$k-1]))));
    $kor_y[$k] = round(150+(125*sin(deg2rad($d[$k-1]))));
    // --- mencari titik tengah --- //
    $t = round(($d[$k-1]+$d[$k])/2);
    $t_x[$k] = round(150+(62.5*cos(deg2rad($t))));
    $t_y[$k] = round(150+(62.5*sin(deg2rad($t))));
    ImageLine($img,150,150,$kor_x[$k],$kor_y[$k],$hitam);
}
// --- mewarnai bagian pie --- //
for($k=1;$k<=5;$k++) {
    ImageFillToBorder($img,$t_x[$k],$t_y[$k],$hitam,$warna[$k-1]);
}
ImageJPEG($img);
?>
 
Dari skrip di atas, ada beberapa bagian yang memerlukan penjelasan khusus. Yang pertama adalah menentukan besar sudut setiap bagian pie.

// --- menentukan besar sudut setiap bagian pie --- //
for($j=0;$j<=4;$j++) {
    $total += $data[$j];
}
$d[0] = 0;
for($i=1;$i<=5;$i++) {
    $d[$i] = ($data[$i-1]/$total) * 360;
    $d[$i] += $d[$i-1];
}
 
Langkah pertama adalah menghitung jumlah total nilai data, kemudian berdasarkan jumlah total tadi, dihitung besar setiap bagian pie, yang diwujudkan dalam besarnya sudut setiap bagian pie. Besarnya sudut akan membentuk deretan bilangan dari 0 sampai 360, misalnya 0, d1, d2, d3, d4, 360, dengan d1 < d2 <d3 < d4.
 
Bagian lain yang harus diperhatikan adalah bagian membentuk pie.

// --- membentuk pie --- //
for($k=1;$k<=5;$k++) {
// --- menggambar bagian-bagian pie --- //
ImageArc($img,150,150,250,250,$d[$k-1],
$d[$k],$hitam);
    // --- mencari koordinat batas --- //
    $kor_x[$k] = round(150+(125*cos(deg2rad($d[$k-1]))));
    $kor_y[$k] = round(150+(125*sin(deg2rad($d[$k-1]))));
    // --- mencari titik tengah --- //
    $t = round(($d[$k-1]+$d[$k])/2);
    $t_x[$k] = round(150+(62.5*cos(deg2rad($t))));
    $t_y[$k] = round(150+(62.5*sin(deg2rad($t))));
    ImageLine($img,150,150,$kor_x[$k],$kor_y[$k],$hitam);
}
// --- mewarnai bagian pie --- //
for($k=1;$k<=5;$k++) {
    ImageFillToBorder($img,$t_x[$k],$t_y[$k],$hitam,$warna[$k-1]);
}

Pada saat mencari koordinat batas, akan diterapkan rumus yang telah dijabarkan sebelumnya, yaitu x = a + r cos dan y = b + r sin, dengan beberapa penyesuaian, seperti misalnya hasilnya harus dibulatkan, oleh karena itu digunakan fungsi round(), lalu sudut harus dikonversikan dari derajat ke radian, sehingga digunakan fungsi deg2rad(). Pada contoh tersebut, ditetapkan diameter pie adalah sebesar 250, sehingga jari-jarinnya adalah 125. Pada saat mencari titik tengah, terdapat angka 62.5, yang merupakan setengah dari jari-jari. Looping untuk mewarnai perlu dipisahkan dari looping untuk menggambar pie, dengan pertimbangan gambar harus jadi terlebih dahulu, baru kemudian diberi warna.
 
Jadilah gambar pie chart -nya.

1 komentar