Menggambar Grafik Batang dengan PHP

Grafik merupakan sebuah pemaparan dari kumpulan nilai yang dipresentasikan dalam bentuk gambar. Tujuan utamanya adalah untuk dapat melihat secara jelas dan menarik sebuah nilai yang dinamis, senantiasa berubah menurut waktu. Grafik banyak digunakan dalam perhitungan statistika. Pada kesempatan kali ini kita akan coba membuatnya menggunakan PHP.

1. Database

Nama Database : keuntungan

CREATE TABLE `keuntungan` (

`bulan` VARCHAR( 10 ) NOT NULL ,
`laba` INT NOT NULL

) ENGINE = MYISAM ;

Memasukkan data

insert into th2002 values (‘januari’,110);
insert into th2002 values (‘februari’,140);
insert into th2002 values (‘maret’,135);
insert into th2002 values (‘april’,170);
insert into th2002 values (‘mei’,200);
insert into th2002 values (‘juni’,180);
insert into th2002 values (‘juli’,210);
insert into th2002 values (‘agustus’,220);
insert into th2002 values (‘september’,165);
insert into th2002 values (‘oktober’,190);
insert into th2002 values (‘november’,245);
insert into th2002 values (‘desember’,250);

2. Coding

<?

Header(“Content-Type:image/jpeg”);

// — Koneksi ke MySQL — //

$host = “localhost”;

$user = “root”;

$pswd = “”;

$conn = @mysql_connect($host,$user,$pswd)

or die(“Koneksi gagal: ” . mysql_error());

mysql_select_db(“laba”,$conn);

// — ambil data — //

$strSQL = “select * from keuntungan”;

$qry = @mysql_query($strSQL,$conn)

or die(“Query salah: ” . mysql_error());

// — alokasi “kanvas” dan warna  — //

$img = ImageCreate(700,900);

$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);

$warna[5] = ImageColorAllocate($img,128,128,128);

$warna[6] = ImageColorAllocate($img,255,128,0);

$warna[7] = ImageColorAllocate($img,0,150,255);

$warna[8] = ImageColorAllocate($img,112,0,255);

$warna[9] = ImageColorAllocate($img,128,255,0);

$warna[10] = ImageColorAllocate($img,40,255,153);

$warna[11] = ImageColorAllocate($img,0,153,255);

$hitam = ImageColorAllocate($img,0,0,0);

$putih = ImageColorAllocate($img,255,255,255);

ImageFill($img,0,0,$putih);

// — menggambar sumbu koordinat — //

ImageLine($img,40,10,40,310,$hitam);

ImageLine($img,40,310,800,310,$hitam);

// — menggambar skala sumbu tegak — //

for ($i=0;$i<=300;$i+=50){

ImageString($img,3,10,(300-$i)+10,”$i”,$hitam);

}

// — menggambar skala sumbu mendatar — //

// — sekaligus balok grafik — //

$letak = 70;

while ($row=mysql_fetch_row($qry)){

$bulan = substr($row[0],0,3);

ImageString($img,3,$letak,330,”$bulan”,$hitam);

$tinggi = (300-$row[1])+10;

ImageFilledRectangle($img,$letak,$tinggi,$letak+20,310,$warna[$x]);

$letak+=50;

$x++;

}

ImageJPEG($img);

?>

3. Output

4. Review

Sekarang kita bahas skrip ini. Bagian pertama adalah koneksi ke MySQL dilanjutkan dengan pengambilan data. Rasanya bagian ini tidak perlu diterangkan lebih lanjut karena hanya koneksi biasa.

Bagian berikutnya adalah alokasi “kanvas” dan warna-warna yang nanti akan dipergunakan untuk menggambar grafik. Bagian ini merupakan bagian mendasar dari proses menggambar dengan PHP.

Selanjutnya adalah menggambar sumbu koordinat. Kita akan menggambar sumbu koordinat dengan tinggi sumbu y adalah 300 pixel dan lebar sumbu x adalah 800 pixel.

Yang perlu diperhatikan adalah koordinat 0,0 dari sumbu koordinat terletak di bagian kiri bawah, sedangkan pada monitor Anda koordinat 0,0 adalah kiri atas. Jadi penggunakan koordinat ini harus diperhatikan dengan baik. Hal ini nampak pada saat menggambar skala untuk sumbu tegak. Skala dari sumbu tegak akan tertulis setiap rentang 50 angka dimulai dari 0 hingga 300. Untuk menggambar skala tersebut kita biasanya memulainya dari bagian perpotongan sumbu lalu naik ke atas, artinya dari skala yang terkecil ke skala yang terbesar. Jika hendak diterapkan pada fungsi ImageString, parameter untuk sumbu y justru harus dimulai dari angka yang terbesar ke angka yang terkecil. Penyebabnya seperti telah disebutkan tadi, yaitu karena letak koordinat 0,0 pada monitor Anda dimulai dari kiri atas, sehingga makin ke bawah angka koordinatnya makin besar, padahal kita menggambar dari bawah terlebih dahulu. Itu pula sebabnya mengapa pada saat menggambar skala sumbu tegak, fungsi ImageString ditulis sebagai berikut:

ImageString($img,3,10,(300-$i)+10,”$i”,$hitam);

Perhatikan bahwa parameter untuk sumbu y tertulis (300-$i)+10. Karena variabel $i makin lama makin besar, maka nilai parameter untuk sumbu y ini makin lama akan makin kecil. Sedangkan angka 10 adalah batas atas dari gambar kita. Maksudnya supaya gambar tersebut tidak “menempel” tepat di bagian atas, tapi ada jarak sebesar 10 pixel.

Hal yang sama akan berlaku saat kita menggambar balok grafik. Jadi saat menuliskan angka koordinat untuk bagian atas balok, fungsi ImageFilledRectangle yang digunakan adalah sebagai berikut:

$tinggi = (300-$row[1])+10;

ImageFilledRectangle($img,$letak,$tinggi,$letak+20,310,$warna[$x]);

Jika Anda ingin menggambar grafik yang akan menggambarkan kumulatif dari laba setiap bulannya (misalnya sekarang bulan Maret, maka laba kumulatif adalah laba dari bulan Maret ditambah laba bulan Februari ditambah laba bulan Januari), maka Anda dapat menambahkan sebuah variabel yang dapat digunakan untuk menyimpan nilai kumulatif tadi. Variabel tersebut akan ditambahkan di bagian menggambar skala sumbu mendatar sekaligus balok grafik, sehingga bagian tersebut akan menjadi sebagai berikut:

$letak = 70;

$kum = 0;

while ($row=mysql_fetch_row($qry)){

$bulan = substr($row[0],0,3);

ImageString($img,3,$letak,330,”$bulan”,$hitam);

$kum += $row[1];

$tinggi = (300-$kum)+10;

ImageFilledRectangle($img,$letak,$tinggi,$letak+20,310,$warna[$x]);

$letak+=50;

$x++;

}

Tentunya Anda harus menyesuaikan tinggi kanvas serta tinggi sumbu tegak dari grafik tersebut supaya mampu menampung gambar grafik kumulatif.

Nah, selamat belajar membuat grafik.