Anda di halaman 1dari 5

Membuat Grafik Chart di PHP

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 verifikasi form 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:
1.CREATE TABLE sensus (
2.negara varchar(20),
3.tahun varchar(4),
4.jmlpria int(11),
5.jmlwanita int(11),
6.PRIMARY KEY (negara, tahun)
7.)

dan berikut ini adalah sampel datanya


01.INSERT
02.INSERT
03.INSERT
04.INSERT
05.INSERT
06.INSERT
07.INSERT
08.INSERT
09.INSERT

INTO
INTO
INTO
INTO
INTO
INTO
INTO
INTO
INTO

`sensus`
`sensus`
`sensus`
`sensus`
`sensus`
`sensus`
`sensus`
`sensus`
`sensus`

VALUES
VALUES
VALUES
VALUES
VALUES
VALUES
VALUES
VALUES
VALUES

('A',
('B',
('C',
('A',
('B',
('C',
('A',
('B',
('C',

'1990',
'1990',
'1990',
'1991',
'1991',
'1991',
'1992',
'1992',
'1992',

'20',
'30',
'32',
'41',
'24',
'34',
'52',
'12',
'34',

'31');
'42');
'16');
'17');
'32');
'17');
'35');
'22');
'34');

OK sekarang akan kita coba menampilkan chart berbentuk garis yang merepresentasikan jumlah total
penduduk negara A untuk setiap tahun.
01.<?php
02.include ("modul/jpgraph.php");
03.include ("modul/jpgraph_line.php");
04.
05.// membuat array inisial untuk jumlah penduduk dan tahunnya
06.$dataJum = array();
07.$dataTh = array();
08.
09.// koneksi ke db
10.mysql_connect("localhost","root","root");
11.mysql_select_db("data");
12.
13.// query SQL untuk mencari jumlah totol penduduk untuk setiap tahun pada negara A
14.$query = "SELECT tahun, jmlpria + jmlwanita as jum FROM sensus WHERE negara = 'A'";
15.$hasil = mysql_query($query);
16.while ($data = mysql_fetch_array($hasil))
17.{
18.// hasil data query ditambahkan ke dalam array jumlah pendudukan dan tahun

19.array_unshift($dataJum, $data['jum']);
20.array_unshift($dataTh, $data['tahun']);
21.}
22.
23.// membuat grafik dengan size 300x200 px
24.$graph = new Graph(300,200,"auto");
25.$graph->SetScale("textlin");
26.
27.// menampilkan data jumlah penduduk ke dalam plot garis
28.$lineplot=new LinePlot($dataJum);
29.$graph->Add($lineplot);
30.
31.// mengatur margin plot
32.$graph->img->SetMargin(40,20,20,40);
33.
34.// menampilkan title dari grafik
35.$graph->title->Set("Grafik Jumlah Penduduk Negara A");
36.
37.// menampilkan label pada sumbu x grafik
38.$graph->xaxis->title->Set("Tahun");
39.
40.// menampilkan label pada sumbu y grafik
41.$graph->yaxis->title->Set("Jumlah");
42.
43.// menampilkan titik data pada sumbu x (tahun)
44.$graph->xaxis->SetTickLabels($dataTh);
45.
46.// mengatur jenis font pada title grafik
47.$graph->title->SetFont(FF_FONT1,FS_BOLD);
48.
49.// memberi warna biru pada plot garis
50.$lineplot->SetColor("blue");
51.
52.// memberikan efek shadow pada image
53.$graph->SetShadow();
54.
55.// tampilkan grafik ke browser
56.$graph->Stroke();
57.?>

Perhatikan perintah berikut ini


1.include ("jpgraph.php");
2.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.
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:

Kita juga dapat membuat chart garis dan batang menjadi satu (combined). Berikut ini adalah script untuk
menggabungkan kedua bentuk chart menjadi satu. Contoh ini sekaligus menjawab pertanyaan mbak Dian
dalam komentar yang dituliskannya.
01.<?php
02.include ("modul/jpgraph.php");
03.include ("modul/jpgraph_line.php");
04.include ("modul/jpgraph_bar.php");
05.
06.$dataJum = array();
07.$dataTh = array();
08.
09.mysql_connect("localhost","root","root");
10.mysql_select_db("data");
11.
12.$query = "SELECT tahun, jmlpria + jmlwanita as jum FROM sensus WHERE negara = 'A'";
13.$hasil = mysql_query($query);
14.while ($data = mysql_fetch_array($hasil))
15.{
16.array_unshift($dataJum, $data['jum']);
17.array_unshift($dataTh, $data['tahun']);
18.}
19.
20.$graph = new Graph(300,200,"auto");
21.$graph->SetScale("textlin");
22.
23.// menampilkan plot batang dari data jumlah penduduk
24.$bplot = new BarPlot($dataJum);
25.$graph->Add($bplot);
26.
27.// menampilkan plot garis dari data jumlah penduduk
28.$lineplot=new LinePlot($dataJum);
29.$graph->Add($lineplot);
30.
31.$graph->img->SetMargin(40,20,20,40);
32.$graph->title->Set("Grafik Jumlah Penduduk Negara A");
33.$graph->xaxis->title->Set("Tahun");
34.$graph->yaxis->title->Set("Jumlah");
35.$graph->xaxis->SetTickLabels($dataTh);
36.
37.$graph->title->SetFont(FF_FONT1,FS_BOLD);
38.
39.$lineplot->SetColor("blue");
40.$bplot->SetFillColor("red");
41.
42.$graph->SetShadow();
43.$graph->Stroke();
44.?>

Untuk membuat chart batang, kita gunakan modul jpgraph_bar.php. Hasil dari script di atas adalah

Script yang terakhir sekarang kita coba tampilkan chart batang yang menunjukkan data statistik jumlah
masing-masing pria dan wanita untuk setiap negara pada tahun 1990. Dalam hal ini chart batang akan
dikelompokkan berdasarkan jenis kelamin. Nah ini dia scriptnya
3

01.<?php
02.include ("modul/jpgraph.php");
03.include ("modul/jpgraph_line.php");
04.include ("modul/jpgraph_bar.php");
05.
06.// inisialisasi array untuk jumlah pria, wanita dan negara
07.
08.$dataPria = array();
09.$dataWanita = array();
10.$dataNegara = array();
11.
12.// koneksi ke mysql
13.
14.mysql_connect("localhost","root","root");
15.mysql_select_db("data");
16.
17.// query SQL untuk menampilkan nama negara dan jumlah prianya pada tahun 1990
18.
19.$query = "SELECT negara, jmlpria, jmlwanita FROM sensus WHERE tahun = '1990' ORDER BY
negara DESC";
20.$hasil = mysql_query($query);
21.while ($data = mysql_fetch_array($hasil))
22.{
23.// menambahkan data hasil query ke array
24.array_unshift($dataNegara, $data['negara']);
25.array_unshift($dataPria, $data['jmlpria']);
26.array_unshift($dataWanita, $data['jmlwanita']);
27.}
28.
29.// membuat image dengan ukuran 400x200 px
30.$graph = new Graph(400,200,"auto");
31.$graph->SetScale("textlin");
32.
33.// menampilkan diagram batang untuk data pria dengan warna orange
34.// pada diagram batang ditampilkan value data
35.$bplot1 = new BarPlot($dataPria);
36.$bplot1->SetFillColor("orange");
37.$bplot1->value->show();
38.
39.// menampilkan diagram batang untuk data wanita dengan warna biru
40.// pada diagram batang ditampilkan value data
41.$bplot2 = new BarPlot($dataWanita);
42.$bplot2->SetFillColor("blue");
43.$bplot2->value->show();
44.
45.// mengelompokkan grafik batang berdasarkan pria dan wanita
46.$gbplot = new GroupBarPlot(array($bplot1,$bplot2));
47.$graph->Add($gbplot);
48.
49.// membuat legend untuk keterangan pria dan wanita
50.$bplot1->SetLegend("Pria");
51.$bplot2->SetLegend("Wanita");
52.$graph->legend->Pos(0.05,0.5,"right","center");
53.
54.// mengatur margin image
55.$graph->img->SetMargin(40,110,20,40);
56.
57.// menampilkan title grafik dan nama masing-masing sumbu
58.$graph->title->Set("Grafik Jumlah Penduduk Negara Th 1990");
59.$graph->xaxis->title->Set("Negara");
60.$graph->yaxis->title->Set("Jumlah");
61.
62.// menampilkan nama negara ke sumbu x
63.$graph->xaxis->SetTickLabels($dataNegara);
64.
65.// format font title grafik
66.$graph->title->SetFont(FF_FONT1,FS_BOLD);
67.
68.// menampilkan efek shadow pada image

69.$graph->SetShadow();
70.
71.// menampilkan image ke browser
72.$graph->Stroke();
73.?>

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

Menarik dan mudah bukan? Bila Anda ingin mendownload semua script di atas termasuk file-file modulnya,
silakan download di bawah ini

Download Script dan Modul JpGraph


Update:
Ada tambahan script untuk JpGraph untuk keperluan modul languange nya. Tanpa script ini, JpGraph akan
terjadi error. Silakan diekstrak di dalam folder hasil ekstrak script di atas.
Download Languange