rosihan aris blog » membua__

- Rosihan Ari`s Blog - http://blog.rosihanari.net -

Membuat Grafik Chart di PHPPosted By rosihanari On December 23, 2008 @ 11:02 am In PHP | 181 Comments

Grafik chart sering digunakan untuk mempermudah pembacaan data statistik. Dari grafik chart, kita jugadapat dengan mudah dan cepat dalam membaca informasi tentang suatu data. Nah… bagi Anda yang telanjurjatuh 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 bentukchart.

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-repotmembuat script chart. Mengapa? ya… karena ada orang yang baik hati dalam membuat modul chart yang siappakai. Tugas para programmer hanyalah membuat script untuk mengintegrasikan modul chart tersebutdengan 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 [1] 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 strukturtabel 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 totalpenduduk negara A untuk setiap tahun.

<?phpinclude ("modul/jpgraph.php");include ("modul/jpgraph_line.php"); // membuat array inisial untuk jumlah penduduk dan tahunnya$dataJum = array();$dataTh = array(); // koneksi ke dbmysql_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']);}

Rosihan Ari`s Blog » Membuat Grafik Chart di PHP » Print http://blog.rosihanari.net/membuat-grafik-chart-di-php/print/

1 of 6 6/11/2005 6:11 PM

http://www.pdfcomplete.com/cms/hppl/tabid/108/Default.aspx?r=q8b3uige22

// 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 membuatchart 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 kitabuat data dalam bentuk array.

Hasil dari script di atas adalah sbb:

[2]

Kita juga dapat membuat chart garis dan batang menjadi satu (combined). Berikut ini adalah script untukmenggabungkan kedua bentuk chart menjadi satu. Contoh ini sekaligus menjawab pertanyaan mbak Dian

dalam komentar yang dituliskannya [3].

<?phpinclude ("modul/jpgraph.php");include ("modul/jpgraph_line.php");include ("modul/jpgraph_bar.php"); $dataJum = array();$dataTh = array();


2 of 6 6/11/2005 6:11 PM


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

[4]

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

<?phpinclude ("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");


3 of 6 6/11/2005 6:11 PM


// 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 tersebutmenunjukkan warna berbeda untuk pria dan wanita. Hasil dari script di atas adalah

[5]


4 of 6 6/11/2005 6:11 PM


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 [6]

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

Download Languange [7]

Rating: 7.4/10 (5 votes cast)

Anda ingin mendownload beberapa tool programming 100% gratis?

Silakan download di FREE PROGRAMMING TOOLS. [8]

atau ingin berdonasi untuk pengembangan blog ini cukup dengan $1 via Paypal?

PayPal - The safer, easier way to pay online!

Beberapa artikel terkait

Ide Membuat Script Grafik PHP Untuk Menampilkan Indeks Prestasi Mahasiswa (Studi Kasus) [9]

Cara Mudah Membuat Grafik Statistik dengan PHP dan CSS [10]

Pemrosesan Form dengan Komponen Combo Box [11]

Membuat Script PHP untuk Rekap Data dari Data Mentah [12]

Membuat Efek Animasi Grafik Fungsi dengan Maple [13]

Membuat Grafik Fungsi 2 Dimensi dengan Maple [14]

Membuat Animasi Grafik Fungsi Kuadrat dengan Mathematica [15]

Menyisipkan Grafik Animasi dari Maple ke Situs Web [16]

Script PHP untuk Menampilkan Siswa Belum Bayar SPP (A Study Case) [17]

Membuat Random Quotes dengan PHP [18]

Article printed from Rosihan Ari`s Blog: http://blog.rosihanari.net

URL to article: http://blog.rosihanari.net/membuat-grafik-chart-di-php

URLs in this post:

[1] verifikasi form: http://blog.rosihanari.net/membuat-kode-verifikasi-anti-spam-pada-form-dengan-jpgraph/[2] Image: http://s363.photobucket.com/albums/oo75/rosihanari/?action=view&current=plot1.png[3] komentar yang dituliskannya: http://blog.rosihanari.net/membuat-kode-verifikasi-anti-spam-pada-form-dengan-jpgraph/comment-page-1/#comment-443[4] Image: http://s363.photobucket.com/albums/oo75/rosihanari/?action=view&current=plot2.png[5] Image: http://s363.photobucket.com/albums/oo75/rosihanari/?action=view&current=plot3.png

[6] Download Script dan Modul JpGraph: http://www.ziddu.com/download/2995083/plot.zip.html[7] Download Languange: http://www.ziddu.com/download/6361660/lang.zip.html[8] FREE PROGRAMMING TOOLS.: http://programmingtools.rosihanari.net[9] Ide Membuat Script Grafik PHP Untuk Menampilkan Indeks Prestasi Mahasiswa (Studi Kasus):http://blog.rosihanari.net/ide-membuat-script-grafik-php-untuk-menampilkan-indeks-prestasi-mahasiswa-studi-kasus[10] Cara Mudah Membuat Grafik Statistik dengan PHP dan CSS: http://blog.rosihanari.net/cara-mudah-membuat-grafik-statistik-dengan-php-dan-css[11] Pemrosesan Form dengan Komponen Combo Box: http://blog.rosihanari.net/pemrosesan-form-dengan-komponen-combo-box[12] Membuat Script PHP untuk Rekap Data dari Data Mentah: http://blog.rosihanari.net/membuat-script-php-untuk-rekap-data-dari-data-mentah[13] Membuat Efek Animasi Grafik Fungsi dengan Maple: http://blog.rosihanari.net/membuat-efek-animasi-grafik-fungsi-dengan-maple[14] Membuat Grafik Fungsi 2 Dimensi dengan Maple: http://blog.rosihanari.net/membuat-grafik-fungsi-2-dimensi-dengan-maple


5 of 6 6/11/2005 6:11 PM


[15] Membuat Animasi Grafik Fungsi Kuadrat dengan Mathematica: http://blog.rosihanari.net/membuat-animasi-grafik-fungsi-kuadrat-dengan-mathematica[16] Menyisipkan Grafik Animasi dari Maple ke Situs Web: http://blog.rosihanari.net/menyisipkan-grafik-animasi-dari-maple-ke-situs-web[17] Script PHP untuk Menampilkan Siswa Belum Bayar SPP (A Study Case): http://blog.rosihanari.net/script-php-untuk-menampilkan-siswa-belum-bayar-spp-a-study-case[18] Membuat Random Quotes dengan PHP: http://blog.rosihanari.net/membuat-random-quotes-dengan-php

Copyright © 2009 Rosihan Ari`s Blog. All rights reserved.


6 of 6 6/11/2005 6:11 PM


rosihan aris blog » membua__

Documents