Membuat Grafik dari PHP MySQL dengan Library JPGraph

Membuat tampilan grafik dengan PHP dari data MySQL tidak sesulit yang diperkirakan. Salah satu hal yang membuat mudah karena adanya library “JPGraph”. Script Library ini dapat di download di http://hem.bredband.net/jpgraph/jpgraph-1.27.tar.gz. File dengan ukuran sebesar 4.5 Mb ini terbagi atas dokumentasi program, contoh, dan library-nya. Pada folder ‘Examples’ kita dapat melihat banyak contoh-contoh script PHP untuk membuat bentuk-bentuk grafik yang kita inginkan. Dalam contoh script di bawah ini kita akan mencoba membuat grafik omzet penjualan barang berbentuk batang secara horizontal. Diasumsikan anda sudah mempunyai table ‘t_jual’ dengan struktur ‘customer’ (nama customer) dan ‘jual’ (jumlah penjualan).

<?php
// meng-include file library
include (“../jpgraph/jpgraph.php”);
include (“../jpgraph/jpgraph_bar.php”);

// buka koneksi ke database
function open_connect() {
$host=”localhost”;
$usrname=”root”;
$usrpwd=””;
$dbname=”main_db”;
$link=mysql_connect($host,$usrname,$usrpwd) or die (“Database tidak dapat
dihubungkan!”);
mysql_select_db($dbname,$link);
return $link;
}

$sqlstr=”SELECT t_jual.* FROM t_jual
ORDER BY customer”;
$link=open_connect();
$qrydtl=mysql_query($sqlstr,$link) or die (“Invalid Query”);
while($rowdtl=mysql_fetch_object($qrydtl)) {
$datay[]=$rowdtl->jual;
$datax[]=$rowdtl->customer;
}

// lebar frame grafik
$width=800;
// pakai baris dibawah bila tinggi frame grafik fixed
//$height=480;
// pakai baris dibawah bila tinggi frame grafik mengikuti banyaknya data
$height=(mysql_num_rows($qrydtl))*30;

// Parameter awal grafik
$graph = new Graph($width,$height,’auto’);
$graph->SetScale(“textlin”);

// set parameter ke ‘true’ bila grafik menggunakan frame
$graph->SetFrame(true);

// grafik diputar 90 derajat agar ditampilkan secara horizontal
$graph->Set90AndMargin(180,10,60,10);

// set warna margin
$graph->SetMarginColor(‘lightblue’);

// buat box di sekeliling area
$graph->SetBox();

// pakai baris dibawah bila area grafik ingin berwarna gradient
//$graph->SetBackgroundGradient(‘white’,’lightblue’,GRAD_HOR,BGRAD_PLOT);

// set judul grafik
$graph->title->Set(“Grafik Penjualan”);
$graph->title->SetFont(FF_VERDANA,FS_BOLD,10);
$graph->subtitle->Set(“Value dalam jutaan”);

// set nama customer di x-axis
$graph->xaxis->SetTickLabels($datax);
$graph->xaxis->SetFont(FF_VERDANA,FS_NORMAL,8);

// set label margin
$graph->xaxis->SetLabelMargin(10);

// posisi label X-axis
$graph->xaxis->SetLabelAlign(‘right’,’center’);

// Add some grace to y-axis so the bars doesn’t go
// all the way to the end of the plot area
$graph->yaxis->scale->SetGrace(20);

// pakai baris dibawah bila y-axis ditampilkan
//$graph->yaxis->Hide();

// memulai grafik
$bplot = new BarPlot($datay);
// pakai baris dibawah bila menginginkan grafik berbayang-bayang
//$bplot->SetShadow();

//You can change the width of the bars if you like
$bplot->SetWidth(0.75);

// warna grafik gradient ungu
//$bplot->SetFillGradient(‘darkred’,’orange’,GRAD_HOR);
$bplot->SetFillGradient(“navy”,”#EEEEEE”,GRAD_LEFT_REFLECTION);

// tampilkan value pada tiap grafik
$bplot->value->Show();
$bplot->value->SetFont(FF_ARIAL,FS_BOLD,10);
$bplot->value->SetAlign(‘left’,’center’);
$bplot->value->SetColor(“black”);
$bplot->value->SetFormat(‘%.1f’);
// set parameter ‘max’ bila value ada di puncak grafik
//$bplot->SetValuePos(‘max’);

// set warna frame grafik
$bplot->SetColor(“white”);

// menambahkan bar pada grafik
$graph->Add($bplot);

// teks tambahan pada grafik
/*
$txt = new Text(‘Note: value dalam juta’);
$txt->SetPos(190,399,’center’,’bottom’);
$txt->SetFont(FF_ARIAL,FS_NORMAL,8);
$graph->Add($txt);
*/
// menggambar grafik
$graph->Stroke();
?>

13 Comments (+add yours?)

  1. Harun
    May 22, 2009 @ 20:48:46

    Alhamdullilah,..bagus sekali artikel jpGraph yang ditulis..semoga bermanfaat,..Amin

  2. Nuri Indah Susanti
    Jan 08, 2010 @ 16:27:58

    Saya udah nyoba.. taPi kenapa terdapat pesan error “Fatal error: Cannot redeclare class ImgStreamCache in C:\xampp\htdocs\SKRIPSI\gd_image.inc.php on line 1811”
    wkt saya liat di baris 1811 file gd_image.inc.php, saya gak tau salahnya apa, …
    Mohon bantuan secepatny…
    Terima kasih…

  3. sugab
    Jan 11, 2010 @ 05:21:32

    script-nya keseluruhan bisa sy lihat?

  4. kiki
    Jul 28, 2010 @ 15:15:53

    kalo nambahjin button back di bawah grafik bisa nggak???

  5. angelhelen
    Jul 29, 2010 @ 13:08:30

    @kiki : lebih mudah jika grafik anda dibuka di tab/window baru, sehingga tidak perlu buttok back

  6. 4ng3lcry
    Mar 28, 2011 @ 00:37:44

    makasih kk… mudah2an ga copast dari yang lain dan karya sendiri!!!
    saya tes yach!!

  7. detal
    May 27, 2011 @ 07:24:52

    bagus tampilan webnya…….
    maju terus bosssssss

  8. kangkam
    Jun 08, 2011 @ 04:09:26

    keren… lanjut bos😀

  9. Anonymous
    Jul 13, 2011 @ 04:33:01

    mau tanya, klo mau ngatur angkanya biar gak pake koma gmn ya??? mksdx bkan angka desimal.,.

  10. def
    Jul 18, 2011 @ 08:32:50

    mau tanya mas , bila menginginkan agar lebar nya otomatis sesuai jumlah data yang ada gimana

  11. jamal
    Sep 07, 2011 @ 03:31:42

    maph tpi knapa gk tampil yah….

  12. sembodo
    Nov 08, 2012 @ 00:07:14

    saya mau bertanya..,
    misal:
    database : “aws”
    tabel : “avg_harian”
    kolom : “hari_ke”,”site”,”pains_hpa”,”aerodrome”,…..
    saya hanya ingin menampilkan data yang ada pada “hari_ke” dan “pains_hpa” saja dalam bentuk diagram spt diatas.
    jumlah data ada 31 baris.
    Bagaimana caranya?
    mohon bimbingannya..
    terima kasih

  13. Discount Flower
    Jun 29, 2013 @ 01:36:08

    I know this web site gives quality dependent articles or reviews and other stuff, is there any other web page which offers these kinds of stuff in quality?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: