Pertama di Indonesia: "Murottal Al Qur'an + Terjemahan" dalam bentuk CD MP3 Original (Coba dulu FREE)
Dapatkan Script SMS Gateway PHP + MySQL

Seperti: software pengirim SMS massal, SMS survei, SMS polling, SMS quick count, SMS dakwah, Web2SMS dan masih banyak lagi... semuanya berbasis PHP & MySQL
[Info Lengkap...]



Membuat Grafik Chart di PHP


December 23rd, 2008 | by rosihanari | Cetak Artikel Ini Cetak Artikel Ini

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:

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.

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:

Photobucket

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.

<?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

Photobucket

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

<?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

Photobucket

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


Beberapa artikel terkait


Share this article on:

Kata kunci: chart - grafik - grafik php - jpgraph - membuat chart php - membuat grafik php - membuat jpgraph - PHP - script chart php - script grafik php -


Ada 154 komentar dalam artikel ini.

  1. maliq says:

    itu kecampur tadinya… udah diganti $data[] tapi kalau fetch array ditambahin display row dari db tetap gak bisa muncul grafiknya, tabelnya muncul. kayaknya gak boleh diganggu penambahan hasil query ke array, ya?
    akhirnya saya buat php tersendiri utk tabel (walau gak praktis sih krn konek db dan fetch array lagi) dan gabungin scrip3.php (pake tag img src) dan php tabel (pake include) dalam satu file. udah bisa.

  2. martha says:

    mas, saya da donlot semua filenya..
    tp koq terdapat banyak error yach tuk script ke3, berikut kutipan errornya :

    Parse error: parse error, expecting `T_OLD_FUNCTION’ or `T_FUNCTION’ or `T_VAR’ or `’}” in c:\apache\htdocs\medsolution\modul\jpgraph.php on line 285

    Parse error: parse error, expecting `T_OLD_FUNCTION’ or `T_FUNCTION’ or `T_VAR’ or `’}” in c:\apache\htdocs\medsolution\modul\jpgraph_line.php on line 25

    Parse error: parse error, expecting `T_OLD_FUNCTION’ or `T_FUNCTION’ or `T_VAR’ or `’}” in c:\apache\htdocs\medsolution\modul\jpgraph_bar.php on line 31

    Fatal error: Cannot instantiate non-existent class: graph in c:\apache\htdocs\medsolution\script3.php on line 30

    mohon pencerahannya, thx

  3. rosihanari says:

    @martha: waduh… error nya apa ya sebabnya? Anda pake XAMPP atau apa mbak?

  4. martha says:

    pake phptriad2-2-1 mas…
    ato punya software yg dpt direkomendasikan???

  5. rosihanari says:

    @martha: sebaiknya jangan pakai phptriad mbak, karena php nya bukan yang terbaru. dan sepertinya phptriad itu projectnya dah berhenti lama. Sebaiknya gunakan AppServ 2.5.10 saja mbak. Silakan download di http://appservnetwork.com

  6. martha says:

    mas, saya da coba pake AppServ 2.5.10…
    ada bbrp error seperti berikut :

    Chosen locale file (“lang/en.inc.php”) for error messages does not exist or is not readable for the PHP process. Please make sure that the file exists and that the file permissions are such that the PHP process is allowed to read this file.

    mohon pencerahannya???

  7. rosihanari says:

    @martha: oh… ya mbak, ada script yang kurang yaitu script untuk languagenya. Di bagian akhir artikel sudah saya kasih keterangan ‘UPDATE’. Silakan download script tambahannya di situ.

  8. martha says:

    udah mas…tp sama aja error nya…folder lang tersebut diletakkan didalam folder modul atau sejajar dengan folder modul???

    mohon pencerahannya????

  9. martha says:

    kl folder lang nya saya taruh dibawah folder modul, berikut error yg terjadi :
    ===============================================
    JpGraph Error: HTTP headers have already been sent.
    Caused by output from file index.php at line 40.
    Explanation:
    HTTP headers have already been sent back to the browser indicating the data as text before the library got a chance to send it’s image HTTP header to this browser. This makes it impossible for the library to send back image data to the browser (since that would be interpretated as text by the browser and show up as junk text).

    Most likely you have some text in your script before the call to Graph::Stroke(). If this texts gets sent back to the browser the browser will assume that all data is plain text. Look for any text, even spaces and newlines, that might have been sent back to the browser.

    For example it is a common mistake to leave a blank line before the opening “<?php".
    ===============================================

    saya makin tambah bingung mas…. :(

  10. rosihanari says:

    @martha: folder ‘lang’ nya diletakkan di dalam folder modul mbak.



Tolong beri komentar donk!

Komentar Anda akan berguna untuk kemajuan blog ini.


Mohon maaf, komentar yang menggunakan email palsu atau komentar bernada negatif atau cemooh secara otomatis akan terhapus karena dianggap spam dan tidak akan tampil dalam daftar komentar.

Dimohon jangan pula memasukkan code program dalam bentuk apapun ke dalam komentar karena akan dianggap spam.

*
Untuk membuktikan bahwa komentar Anda bukan spam, tulis kata yang muncul dalam gambar di bawah ini. Bila Anda tidak bisa membaca kata dalam gambar, klik pada gambar tersebut untuk mendengarkan suara dari kata tersebut
Click to hear an audio file of the anti-spam word