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. Nah… bagi Anda yang
telanjur jatuh cinta dengan PHP, kira-kira bisa tidak ya menampilkan data
statistik ke dalam bentuk chart? Jawabannya jelas BISA donk… Bahkan kita dapat
mengintegrasikan chart tersebut dengan database, maksudnya data statistik yang
tersimpan dalam database nantinya akan direpresentasikan ke dalam bentuk chart.
Kalau PHP bisa digunakan untuk
membuat chart? lantas… gimana caranya? Sulitkah membuatnya?
Pada saat sekarang dimana banyak
orang yang baik hati, para pecinta PHP tidak perlu lagi repot-repot membuat
script chart. Mengapa? ya… karena ada orang yang baik hati dalam membuat 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.
Wah asyik nih… trus nama modulnya
apa yah? Nama modulnya adalah JpGraph. Pada artikel yang lain, saya telah
menunjukkan cara penggunaannya untuk keperluan verifikasiform supaya terhindar dari spam. Sedangkan kini, saya akan tunjukkan cara
penggunaanya untuk menampilkan chart dari data mysql.
Untuk kali ini, saya akan ambil
studi kasus tentang data statistik penduduk suatu negara. Misalkan struktur
tabel yang digunakan adalah sbb:
CREATE TABLE sensus (
negara varchar(20),
tahun varchar(4),
jmlpria int(11),
jmlwanita int(11),
PRIMARY KEY (negara, tahun)
)
dan berikut ini adalah sampel
datanya
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');
OK… sekarang akan kita coba
menampilkan chart berbentuk garis yang merepresentasikan jumlah total penduduk
negara A untuk setiap tahun.
<?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","root","root");
mysql_select_db("data");
// 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();
?>
Perhatikan perintah berikut ini
include ("jpgraph.php");
include ("jpgraph_line.php");
Buat apa tuh kedua perintah? Kedua
perintah akan memanggil modul jpgraph dan modul untuk membuat chart garis.
Tanpa kedua modul file tersebut, chart garis tidak muncul, namun yang muncul
adalah error 
Anda dapat mendownload
modul-modul tersebut di bagian bawah artikel ini.
Anda dapat mendownload
modul-modul tersebut di bagian bawah artikel ini.
Oya data yang akan ditampilkan
dengan Jpgraph basisnya adalah array, sehingga dalam script di atas kita buat
data dalam bentuk array.
Hasil dari script di atas adalah
sbb:
<?php
include ("modul/jpgraph.php");
include ("modul/jpgraph_line.php");
include ("modul/jpgraph_bar.php");
$dataJum = array();
$dataTh = array();
mysql_connect("localhost","root","root");
mysql_select_db("data");
$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();
?>
Untuk membuat chart batang, kita gunakan modul
jpgraph_bar.php. Hasil dari script di atas adalah
<?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","root","root");
mysql_select_db("data");
// 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();
?>
Untuk lebih menarik dan lebih informatif kita tambahkan
sebuah legend pada grafik tersebut. Legend tersebut menunjukkan warna berbeda
untuk pria dan wanita. Hasil dari script di atas adalah
0 Komentar