Bab13

Membuat grafik dengan PHP

I. Membuat grafi dengan CSS

Grafik chart sering digunakan untuk mempermudah pembacaan data statistik. Dari grafik
chart, kita juga dapat dengan mudah dan cepat dalam membaca informasi tentang suatu data.
Untuk membuat grafik chart statistik yang diambil dari data mysql kita dapat menggunakan
perintah PHP sederhana dan ditunjang oleh CSS (Cascade Style Sheet).
Contoh studi kasus kali ini, menerapkan representasi data mahasiswa berdasarkan jenis
kelaminnya. Tabel database dan datanya sebagai berikut:

1. Buatlah tabel dengan perintah berikut:

CREATE TABLE mhs (
nim varchar(10),
nama varchar(10),
jenisKelamin varchar(10),
PRIMARY KEY (nim)
);

2. Isilah datanya dengan perintah berikut:

INSERT INTO mhs VALUES ('A001', 'A', 'LAKI-LAKI');
INSERT INTO mhs VALUES ('A002', 'B', 'LAKI-LAKI');
INSERT INTO mhs VALUES ('A003', 'C', 'LAKI-LAKI');
INSERT INTO mhs VALUES ('A004', 'D', 'PEREMPUAN');
INSERT INTO mhs VALUES ('A005', 'E', 'LAKI-LAKI');

grafik batang kita buat menggunakan CSS sedangkan panjang pendeknya grafik batang
tersebut tergantung jumlah data yang kita hitung menggunakan script PHP.
Untuk membuat sebuah batang dengan CSS, kita cukup membuat tag seperti ini:

<div style="height: 10px; width: 10%; background-color: red;" title="..."></div>

Atribut ‘height’ digunakan untuk mengatur lebar dari batang (dalam hal ini menggunakan
satuan pixel). Selanjutnya ‘width’ untuk menentukan panjang batang. Anda bisa
menggunakan satuan pixel maupun prosentase. Bila Anda menggunakan prosentase maka
prosentase yang dimaksud adalah relatif terhadap panjang jendela browser. Misalkan
diberikan ‘width: 10%’ maka panjang batang adalah 10% dari panjang jendela browser.
Sedangkan atribut ‘background-color’ untuk mengatur warna batang, dan ‘title’ untuk
memberikan title dari batang tersebut. Efek pemberian ‘title’ untuk memunculkan keterangan
(tool tips) ketika mouse mengenai batang tersebut.

Untuk mengatur panjang pendeknya batang dengan menggunakan skala. Kita tentukan
panjang grafik maksimum adalah 30% dari panjang jendela browser. Karena 30% ini panjang
maksimum, maka kejadian ini akan terjadi ketika ada item data yang jumlahnya 100%.
Sebagai contoh misalkan ada 10 mahasiswa, dan semuanya pria (prosentase pria 100%).
Dengan demikian grafik batang untuk pria ini panjangnya adalah 30%. Dari asumsi ini, kita
tinggal atur skalanya berarti untuk item data sejumlah n% maka panjang batangnya adalah
(n*30/100)%.

Dengan demikian, berdasarkan ide di atas berarti sebelum mulai membuat grafiknya, kita
harus dapatkan dulu data prosentase setiap item data, dalam hal ini jumlah laki-lakinya
berapa prosen begitu pula perempuannya. Setelah jumlah prosentase masing-masing
diketahui, barulah kita gunakan untuk mengatur panjang grafik batang menggunakan skala.
Adapun script untuk menampilkan grafik adalah sebagai berikut :
grafik.php
<?php
// koneksi ke mysql

mysql_connect("localhost", "deni", "deni");

mysql_select_db("grafik");

// mencari jumlah laki-laki dari database

$query = "SELECT count(*) AS jumCowok FROM mhs WHERE jenisKelamin = 'LAKI-LAKI'";
$hasil = mysql_query($query);
$data = mysql_fetch_array($hasil);
$jumCowok = $data['jumCowok'];

// mencari jumlah perempuan dari database

$query = "SELECT count(*) AS jumCewek FROM mhs WHERE jenisKelamin = 'PEREMPUAN'";
$hasil = mysql_query($query);
$data = mysql_fetch_array($hasil);
$jumCewek = $data['jumCewek'];

// menghitung total mahasiswa

$total = $jumCowok + $jumCewek;
// menghitung prosentase laki-laki dan perempuan
$prosenCowok = $jumCowok/$total * 100;
$prosenCewek = $jumCewek/$total * 100;

// menentukan panjang grafik batang berdasarkan prosentase

if ($prosenCowok == 0) $panjangGrafikCowok = 1;
else $panjangGrafikCowok = $prosenCowok * 30 / 100;
if ($prosenCewek == 0) $panjangGrafikCewek = 1;
else $panjangGrafikCewek = $prosenCewek * 30 / 100;

?>

<h2>Statistik Mahasiswa Berdasarkan Jenis Kelamin</h2>

<p><b>Laki-laki</b> (Jumlah: <?php echo $jumCowok; ?> |

<?php echo $prosenCowok; ?>%)
<div style="height: 10px; width: <?php echo $panjangGrafikCowok; ?>%;
background-color: red;" title="Laki-laki (Jumlah: <?php echo $jumCowok; ?> |
<?php echo $prosenCowok; ?>%)"></div></p>

<p><b>Perempuan</b> (Jumlah: <?php echo $jumCewek; ?> |

<?php echo $prosenCewek; ?>%) <div style="height: 10px;
width: <?php echo $panjangGrafikCewek; ?>%;
background-color: red;" title="Perempuan (Jumlah: <?php echo $jumCewek; ?> |
<?php echo $prosenCewek; ?>%)"></div></p>

Hasil tampilan di browsernya adalah sebagai berikut:

II. Membuat grafik dengan Library
Pada saat sekarang programer PHP tidak perlu lagi repot-repot membuat script chart, karena ada
modul chart yang siap pakai. Tugas para programmer hanyalah membuat script untuk
mengintegrasikan modul chart tersebut dengan data yang dimilikinya, serta mengatur tampilan
chartnya saja. Modul yang digunakan adalah JpGraph. Modul jpGraph dapat didownload di internet.
Cara penggunaanya untuk menampilkan chart dari data mysql dapat dilihat pada contoh dibawah ini.
Studi kasus tentang data statistik penduduk suatu negara. Misalkan struktur tabel yang digunakan
adalah sbb:

1. Buatlah tabel dengan perintah berikut:

CREATE TABLE sensus (
negara varchar(20),
tahun varchar(4),
jmlpria int(11),
jmlwanita int(11),
PRIMARY KEY (negara, tahun)
)

2. Isilah datanya dengan perintah berikut:

INSERT INTO `sensus` VALUES ('A', '1990', '20', '31');
INSERT INTO `sensus` VALUES ('B', '1990', '30', '42');
INSERT INTO `sensus` VALUES ('C', '1990', '32', '16');
INSERT INTO `sensus` VALUES ('A', '1991', '41', '17');
INSERT INTO `sensus` VALUES ('B', '1991', '24', '32');
INSERT INTO `sensus` VALUES ('C', '1991', '34', '17');
INSERT INTO `sensus` VALUES ('A', '1992', '52', '35');
INSERT INTO `sensus` VALUES ('B', '1992', '12', '22');
INSERT INTO `sensus` VALUES ('C', '1992', '34', '34');

3. chart berbentuk garis yang merepresentasikan jumlah total penduduk negara A untuk
setiap tahun.
Downloadlah modul jpGraph kemudian simpan satu folder pada script di bawah ini.

chart1.php
<?php
include ("modul/jpgraph.php");
include ("modul/jpgraph_line.php");

// membuat array inisial untuk jumlah penduduk dan tahunnya

$dataJum = array();
$dataTh = array();

// koneksi ke db
mysql_connect("localhost","deni","deni");
mysql_select_db("grafik");

// query SQL untuk mencari jumlah totol penduduk untuk setiap tahun pada negara A
$query = "SELECT tahun, jmlpria + jmlwanita as jum FROM sensus WHERE negara = 'A'";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
// hasil data query ditambahkan ke dalam array jumlah pendudukan dan tahun
array_unshift($dataJum, $data['jum']);
array_unshift($dataTh, $data['tahun']);
}
// membuat grafik dengan size 300x200 px
$graph = new Graph(300,200,"auto");
$graph->SetScale("textlin");

// menampilkan data jumlah penduduk ke dalam plot garis

$lineplot=new LinePlot($dataJum);
$graph->Add($lineplot);
// mengatur margin plot
$graph->img->SetMargin(40,20,20,40);

// menampilkan title dari grafik

$graph->title->Set("Grafik Jumlah Penduduk Negara A");

// menampilkan label pada sumbu x grafik

$graph->xaxis->title->Set("Tahun");

// menampilkan label pada sumbu y grafik

$graph->yaxis->title->Set("Jumlah");

// menampilkan titik data pada sumbu x (tahun)

$graph->xaxis->SetTickLabels($dataTh);

// mengatur jenis font pada title grafik

$graph->title->SetFont(FF_FONT1,FS_BOLD);

// memberi warna biru pada plot garis

$lineplot->SetColor("blue");

// memberikan efek shadow pada image

$graph->SetShadow();

// tampilkan grafik ke browser

$graph->Stroke();
?>

Hasil tampilan di browsernya adalah sebagai berikut:

4. chart berbentuk garis dan bar.

chart2.php
<?php
include ("modul/jpgraph.php");
include ("modul/jpgraph_line.php");
include ("modul/jpgraph_bar.php");

$dataJum = array();
$dataTh = array();

mysql_connect("localhost","deni","deni");
mysql_select_db("deni");

$query = "SELECT tahun, jmlpria + jmlwanita as jum FROM sensus WHERE negara = 'A'";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
array_unshift($dataJum, $data['jum']);
array_unshift($dataTh, $data['tahun']);
}
$graph = new Graph(300,200,"auto");
$graph->SetScale("textlin");

// menampilkan plot batang dari data jumlah penduduk

$bplot = new BarPlot($dataJum);
$graph->Add($bplot);

// menampilkan plot garis dari data jumlah penduduk

$lineplot=new LinePlot($dataJum);
$graph->Add($lineplot);

$graph->img->SetMargin(40,20,20,40);
$graph->title->Set("Grafik Jumlah Penduduk Negara A");
$graph->xaxis->title->Set("Tahun");
$graph->yaxis->title->Set("Jumlah");
$graph->xaxis->SetTickLabels($dataTh);

$graph->title->SetFont(FF_FONT1,FS_BOLD);

$lineplot->SetColor("blue");
$bplot->SetFillColor("red");

$graph->SetShadow();
$graph->Stroke();
?>

Hasil tampilan di browsernya adalah sebagai berikut:

5. chart berbentuk garis dan bar untuk opria dan wanita.

chart3.php
<?php
include ("modul/jpgraph.php");
include ("modul/jpgraph_line.php");
include ("modul/jpgraph_bar.php");

// inisialisasi array untuk jumlah pria, wanita dan negara

$dataPria = array();
$dataWanita = array();
$dataNegara = array();

// koneksi ke mysql

mysql_connect("localhost","deni","deni");
mysql_select_db("deni");

// query SQL untuk menampilkan nama negara dan jumlah prianya pada tahun 1990

$query = "SELECT negara, jmlpria, jmlwanita FROM sensus WHERE tahun = '1990' ORDER
BY negara DESC";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
// menambahkan data hasil query ke array
array_unshift($dataNegara, $data['negara']);
array_unshift($dataPria, $data['jmlpria']);
array_unshift($dataWanita, $data['jmlwanita']);
}

// membuat image dengan ukuran 400x200 px

$graph = new Graph(400,200,"auto");
$graph->SetScale("textlin");

// menampilkan diagram batang untuk data pria dengan warna orange

// pada diagram batang ditampilkan value data
$bplot1 = new BarPlot($dataPria);
$bplot1->SetFillColor("orange");
$bplot1->value->show();

// menampilkan diagram batang untuk data wanita dengan warna biru

// pada diagram batang ditampilkan value data
$bplot2 = new BarPlot($dataWanita);
$bplot2->SetFillColor("blue");
$bplot2->value->show();

// mengelompokkan grafik batang berdasarkan pria dan wanita

$gbplot = new GroupBarPlot(array($bplot1,$bplot2));
$graph->Add($gbplot);

// membuat legend untuk keterangan pria dan wanita

$bplot1->SetLegend("Pria");
$bplot2->SetLegend("Wanita");
$graph->legend->Pos(0.05,0.5,"right","center");

// mengatur margin image

$graph->img->SetMargin(40,110,20,40);

// menampilkan title grafik dan nama masing-masing sumbu

$graph->title->Set("Grafik Jumlah Penduduk Negara Th 1990");
$graph->xaxis->title->Set("Negara");
$graph->yaxis->title->Set("Jumlah");

// menampilkan nama negara ke sumbu x

$graph->xaxis->SetTickLabels($dataNegara);

// format font title grafik

$graph->title->SetFont(FF_FONT1,FS_BOLD);

// menampilkan efek shadow pada image

$graph->SetShadow();

// menampilkan image ke browser

$graph->Stroke();
?>

Hasil tampilan di browsernya adalah sebagai berikut: