Manipulasi Grafik dalam PHP dengan JPGraph

Bentuk grafik pada browser:

JPGraph adalah salah satu library dari PHP yang berfungsi untuk membuat dan memanipulasi grafik. Dengan menggunakan JPGraph, seorang programmer dapat dengan mudah menggambar suatu grafik dengan menggunakan class-class dan method yang ada pada JPGraph. Teknik pembuatan grafik yang kedengarannya sulit dapat disederhanakan menjadi beberapa baris saja.

JPGraph bersifat open source, dapat didownload secara gratis melalui http://aditus.nu/JPGraph/ . Perlu diperhatikan bahwa untuk menggunakan JPGraph pastikan GD Library aktif (enable) pada php anda.

Setelah JPGraph berhasil didownload, ekstrak file tersebut ke tempat directory kerja anda.

Folder docs berisi manual dari JPGraph sedangkan folder src berisi file-file yang digunakan

2. Grafik Garis
Disini kita akan membuat suatu grafik yang datanya disimpan dalam database MySQL. Pada database anda buatlah tabel ‘data_grafik’ dengan 2 field: ‘dataX’ dan ‘dataY’ sebagai berikut:

CREATE TABLE ‘data_grafik’ (‘dataX’ int(10) default NULL, ‘data Y’ int(10) default
NULL);

Isi tabel tersebut dengan data berikut:
Data X 1 2 3 4 5 6
Data Y 10 5 8 12 6 9

Berikut ini adalah kode program untuk menampilkan data diatas ke dalam bentuk grafik garis:
<?
include (“JPGraph/JPGraph.php”);
include (“JPGraph/JPGraph_line.php”);
$db = mysql_connect(“localhost”, “root”,””) or die(mysql_error());
mysql_select_db(“test”,$db) or die(mysql_error());
$sql = mysql_query(“SELECT * FROM data_grafik”) or die(mysql_error());
while($row = mysql_fetch_array($sql))
{
$data[] = $row[1];
$leg[] = $row[0];
}
$graph = new Graph(350,250,”auto”);
$graph->SetScale(‘textint’);
$graph->img->SetMargin(50,30,50,50);
$graph->SetShadow();
$graph->title->Set(“Grafik Batang”);
$graph->xaxis->SetTickLabels($leg);
$bplot = new LinePlot($data);
$bplot->value->Show();
$bplot->value->SetFont(FF_ARIAL,FS_BOLD);
$bplot->value->SetAngle(45);
$bplot->SetLegend(“Banyak data”);
$graph->Add($bplot);
$graph->Stroke();
?>

Penjelasan Kode Program
include (“JPGraph/JPGraph.php”);
include (“JPGraph/JPGraph_line.php”);

Baris di atas digunakan agar dapat mengakses class graph dengan jenis graph yang digunakan berbentuk
garis dari library JPGraph
$db = mysql_connect(“localhost”, “root”,””) or die(mysql_error());
mysql_select_db(“test”,$db) or die(mysql_error());
$sql = mysql_query(“SELECT * FROM data_grafik”) or die(mysql_error());

Baris di atas digunakan untuk koneksi MySQL dengan database ‘test’ dan nama tabel ‘data_grafik’ yang
telah dibuat sebelumnya
while($row = mysql_fetch_array($sql))
{
$data[] = $row[1];
$leg[] = $row[0];
}

Setelah berhasil menjalankan koneksi, data field pertama($row[0] = dataX) disimpan ke dalam $leg[]
sedangkan field kedua($row[1] = dataY) disimpan dalam $data[]

$graph = new Graph(350,250,”auto”);
Baris diatas adalah untuk membuat graph baru dengan lebar=350 dan panjang=250.”auto” dimaksudkan
agar proses selanjutnya dilakukan oleh library secara otomatis.
$graph->SetScale(‘textint’);

Baris ini adalah menentukan tipe dari axis X dan Y yang digunakan. Axis X diset bertipe ‘text’ sedangkan
axis Y bertipe ‘int’. Beberapa tipe lain yang dapat digunakan adalah SetScale(‘loglog’) dan
SetScale(‘linlog’)
$graph->img->SetMargin(50,30,50,50);
Baris diatas untuk menentukan margin dari graph yang digunakan dengan urutan besar margin kiri, kanan,
atas dan bawah graph.
$graph->SetShadow();
Kode Baris diatas untuk menampilkan bayangan pada graph yang akan ditampilkan
$graph->title->Set(“Grafik Garis”);
Judul dari graph yang dibuat diberi nama “Grafik Garis”
$graph->xaxis->SetTickLabels($leg);
Axis X dari graph ditentukan dari dataX yang sebelumnya telah disimpan dalan $leg
$bplot = new LinePlot($data);
Kode baris diatas digunakan untuk membuat jenis grafik yang ditampilkan yaitu grafik garis dengan isi
dataY yang telah disimpan sebelumnya di dalam $data
$bplot->value->Show();
$bplot->value->SetFont(FF_ARIAL,FS_BOLD);
$bplot->value->SetAngle(45);
$bplot->SetLegend(“Banyak data”);
Kode baris diatas adalah untuk menampilkan nilai dari grafik garis dengan Font yang digunakan Arial
dengan tipe Bold. Nilai yang ditampilkan akan memiliki kemiringan 450 . Diberikan juga legend dari nilai
grafik dengan nama ‘Banyak data’
$graph->Add($bplot);
Baris diatas untuk memasukkan grafik garis kedalam graph yang telah dibuat sebelumnya.
$graph->Stroke();
Kode Baris diatas diguanakn untuk menampilkan graph yang berisi grafik garis pada browser.

Bentuk grafik pada browser:

3. Grafik Batang
Kita dapat mengubah jenis grafik yang digunakan dari bentuk garis menjadi grafik batang
dengan mengubah baris include file kedua menjadi
include (“JPGraph/JPGraph_bar.php”);
Setelah itu dalam kode baris pembuatan grafik diganti menjadi
$bplot = new BarPlot($data);
Kode program untuk pembuatan grafik batang dengan data yang sama adalah sebagai berikut:
<?
include (“JPGraph/JPGraph.php”);
include (“JPGraph/JPGraph_bar.php”);
$db = mysql_connect(“localhost”, “root”,””) or die(mysql_error());
mysql_select_db(“test”,$db) or die(mysql_error());
$sql = mysql_query(“SELECT * FROM data_grafik”) or die(mysql_error());
while($row = mysql_fetch_array($sql))
{
$data[] = $row[1];
$leg[] = $row[0];
}
$graph = new Graph(350,250,”auto”);
$graph->SetScale(‘textint’);
$graph->img->SetMargin(50,30,50,50);
$graph->SetShadow();
$graph->title->Set(“Grafik Batang”);
$graph->xaxis->SetTickLabels($leg);
$bplot = new BarPlot($data);
$bplot->value->Show();
$bplot->value->SetFont(FF_ARIAL,FS_BOLD);
$bplot->value->SetAngle(45);
$bplot->SetLegend(“Banyak data”);
$graph->Add($bplot);
$graph->Stroke();
?>

Bentuk grafik pada browser:

4. Grafik PieChart 3 Dimensi
Grafik pie 3 dimensi sangat berguna untuk menampilkan data-data statistik dalam bentuk
persentase dari keseluruhan data. Dibanding dengan grafik garis atau grafik batang, grafik pie
memiliki tampilan yang lebih menarik dan lebih mudah dipahami pengguna. Terutama untuk
data-data yang sifatnya perbandingan. Untuk data yang sama, kita dapat menampilkannya dalam
bentuk grafik pie 3 dimensi. Dalam hal ini dataY dianggap sebagai banyak data yang dimiliki
oleh dataX.
Berikut ini adalah kode baris yang digunakan untuk menampilkan grafik pie chart 3 dimensi
<?
include (“jpgraph/jpgraph.php”);
include (“jpgraph/jpgraph_pie.php”);
include (“jpgraph/jpgraph_pie3d.php”);
$db = mysql_connect(“localhost”, “root”,””) or die(mysql_error());
mysql_select_db(“test”,$db) or die(mysql_error());
$sql = mysql_query(“SELECT * FROM data_grafik”) or die(mysql_error());
while($row = mysql_fetch_array($sql))
{
$data[] = $row[1];
$leg[] = $row[0];
}
$graph = new PieGraph(350,250,”auto”);
$graph->SetScale(‘textint’);
$graph->img->SetMargin(50,30,50,50);
$graph->SetShadow();
$graph->title->Set(“Grafik Pie Chart 3 Dimensi”);
$bplot = new PiePlot3D($data);
$bplot->SetCenter(0.45);
$bplot->SetLegends($leg);
$graph->Add($bplot);
$graph->Stroke();
?>

Beberapa perubahan yang terjadi antara jenis grafik sebelumnya antara lain adalah sebagai
berikut:
include (“jpgraph/jpgraph_pie.php”);
include (“jpgraph/jpgraph_pie3d.php”);
Disini ditambahkan dua include file untuk mengakses class dari graph pie dan grafik pie 3
dimensi.
$graph = new PieGraph(350,250,”auto”);
Graph baru dibuat dengan tipe PieGraph
$bplot = new PiePlot3D($data);
Dibuat grafik dengan jenis grafik pie 3 dimensi
$bplot->SetCenter(0.45);
Baris diatas digunakan untuk menentukan posisi grafik pie pada graph
$bplot->SetLegends($leg);
Kode baris diatas adalah untuk menampilkan legend berdasarkan dataX($leg)

Bentuk Grafik pada Browser

Hal-hal yang saya bahas pada artikel ini hanyalah dasar-dasar dari fungsi-fungsi yang dimiliki
oleh JPGraph. JPGraph masih banyak memiliki method-method dan class lainnya yang dapat
membantu programmer dalam membuat grafik yang lebih baik dan menarik.
Beberapa fasilitas yang dimiliki oleh JPGraph antara lain
• Mendukung format grafik dengan tipe PNG, GIF maupun JPG
• Mendukung jenis pewarnaan bergradient dengan tujuh jenis pewarnaan
• Mendukung gambar sebagai background grafik dengan berbagai jenis
• Mendukung jumlah grafik yang tidak terbatas dalam graph. Hal ini memungkinkan satu
graph memiliki berbagai macam grafik
Dibalik ini semua, saya yakin masih banyak kekurangan dibalik tulisan ini. Saran maupun kritik
dari pembaca, saya harapkan sebagai masukan agar dapat menulis lebih baik ke depannya.


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: