JPGraph

Pengertian JPGraph

JpGraph (http://jpgraph.net) merupakan pustaka grafis chart PHP yang sangat populer digunakan. Tipe-tipe chart yang didukung juga sangat beragam, diantaranya :

·          Line (Garis)

·          Bar (Batang)

·          Pie (Pai)

·          Scatter (Sebaran)

·          Splines

·          dll

Penggunaan JPGraph

Untuk  menggunakan jpgraph, kita harus download dulu dari websitenya, extract paket dan yang paling mudah adalah mengikutkan seluruh library jpgraph kedalam folder kita, misal dicopykan ke folder jpgraph di
folder web kita ( diambil dari folder src di paket jpgraph.

Untuk mencobanya, kita buat dahulu bentuk yang sederhana dengan data diambil dari array, dengan grafk berbentuk garis. Berikut kodenya

<?php

//karena ingin membuat grafik garis, selain library jpgraph,

//diperlukan juga jpgraph_line

include ("jpgraph/jpgraph.php");

include ("jpgraph/jpgraph_line.php");

 // contoh datanya

$ydata = array(11,3,8,12,5,1,9,13,5,7);

 // buat graph dengan auto scaling

$graph = new Graph(350,250,"auto"); 

$graph->SetScale("textlin");

 // Buat garis dengan warna biru

$lineplot=new LinePlot($ydata);

$lineplot->SetColor("blue");

 // tambahkan garis diatas ke grafik

$graph->Add($lineplot);

 // tampilkan graph-nya

$graph->Stroke();

?>

Setelah dijalankan, seharusnya akan muncul bentuk grafik garis berwarna biru seperti dibawah:

coba bandingkan point-point pada garis tersebut dengan data di $ydata. Bentuk garis ini akan otomatis berubah sesuai data yang dimasukkan.

Dalam kode diatas baru ada setting untuk memberi warna garis. Dengan mudah kita dapat mengganti warnanya dengan mengganti parameter ’blue’ dengan nama warna yang lain.

Dibagian terakhir sebelum graph digambar terlihat bahwa garis yang dibuat kemudian dimasukkan ke dalam grafik. Nah kita bisa membuat banyak garis dengan cara yang sama seperti diatas yaitu: definiskan data, definisikan bentuk garis (atau bentuk grafik lainnya), isikan setting2nya, dan tambahkan ke grafik. Misal kita tambahkan di sebelum $graph->Stroke(), kode berikut:

$ydata2 = array(10,13,4,2,7,5,11,3,9,2);

$lineplot2=new LinePlot($ydata2);

$lineplot2->SetColor("red");

$graph->Add($lineplot2);

maka akan terlihat graph seperrti gambar berikut

Selanjutnya, kita tambahkan pernik-pernik yang umumnya ada pada graph. Yang pertama adalah judul. Untuk membuat judul, cukup tambahkan kode berikut :

$graph->title->Set("Grafik Penjualan Sate");

kita tambahkan juga legend. Untuk legend, perlu ditambahkan di tiap object yang ada pada grafik, dalam contoh kita adalah 2 garis $lineplot dan $lineplot2.Jadi tambahkan kode:

$lineplot->SetLegend("Ayam");

$lineplot2->SetLegend("Kambing");

Biar lebih jelas lagi, kita tambahkan caption pada sumbu X dan Y:

$graph->xaxis->title->Set("Bulan");

$graph->yaxis->title->Set("Jumlah (ribu porsi)");

Setelah ditambah judul , legend, nama sumbu , bentuk grafik akan menjadi seperti berikut:

Untuk garis, bentuknya dapat diganti dengan SetStyle dengan parameter  solid , dotted, dashed, atau lobgdashed. Selain itu ada type lain yaitu stepstyle. Bisa ditambahkan kode berikut untuk mencobanya

$lineplot->SetStyle("dashed");

$lineplot2->SetStepStyle();

maka tampilan grafik akan berubah seperti ini

 titik2 poit pada garis bisa diperjelas dengan menggunakan mark dan valuenya.

$lineplot->mark->SetType(MARK_CIRCLE);

$lineplot->value->show();

dan bentuknya menjadi:

Isi dari titik2 di sumbu X dapat diganti dengan mengambil dari suatu data array. Ini bisa dimanfaatkan misalnya untuk diganti menjadi nama hari atau nama bulan. Misal ditambahkan kode berikut:

$datax=array("Jan","Feb","Mar","Apr","Mei","Jun","Jul","Agt","Sep","Okt");

$graph->xaxis->SetTickLabels($datax);

Untuk bentuk garis sepertinya sudah cukup komplit. Sekarang waktunya untuk menambah pengetahuan ke bentuk-bentuk yang lain. Pada dasarnya untuk menggunakan bentuk yg lain hanya perlu menggaanti beberapa bagian saja. Yaitu di bagian include library dan dibagian new . Nama variabel kan tidak perlu diganti, hanya kalo tidak diganti bikin jadi kurang cocok aja :)

Tapi sebelum ke bentuk2 yang lain selain garis, ada bentuk yang diturunkan dari bentuk gaaris ini, yaitu dengan menambahkan :

 $lineplot->SetFillColor("cyan");

ini akan membuat bentuk seperti dibawah:

Salah satu bentuk grafik yg juga sering dipakai selain bentuk garis yaitu grafik batang atau bar. Maka untuk berikutnya adalah bagaimana membuat grafik batang. Tambahkanlah kode berikut:

include ("jpgraph/jpgraph_line.php");

$ydata3 = array(2,4,6,8,10,12,15,7,3,1);

$bplot = new BarPlot($ydata3);

$bplot->SetFillColor("orange");

$bplot->SetLegend("Kelinci");

$graph->Add($bplot);

 maka grafiknya akan berubah menjadi seperti berikut:

Seringkali dalam grafik batang, terlihat batangnya seakan-akan 3 dimensi, ini dapat dibuat dengan menambahkan satu baris kode berikut:

$bplot->SetShadow();

sehingga tampilannya menjadi seperti dibawah

ukuran dari batang dapat diperlebar. Dengan bentuk yang lebih longgar ini, didalamnya diisi dengan nilai. Bisa dilakukan dengan kode berikut:

//tampilkan nilai

$bplot->value->Show();

$bplot->value->SetFormat('%d');

// letakkan ditengah bar

$bplot->SetValuePos('center');

// buat bar lebih lebar

$bplot->SetWidth(0.8);

Grafik batang sering kali dibuat ber-grup. Untuk membuat bergroup seperti ini, perlu object baru yaitu GroupBarPlot. GroupbarPlot dibentuk dari array barPlot. Untuk lebih jelasnya coba ditambahkan kode dibawah

//datanya

$data1y=array(1,2,3,3,1,2);

$data2y=array(2,2,2,1,3,3);

// membuat bar plots

$b1plot = new BarPlot($data1y);

$b1plot->SetFillColor("green");

$b1plot->SetLegend("kerang");

$b2plot = new BarPlot($data2y);

$b2plot->SetFillColor("blue");

$b2plot->SetLegend("usus");

// membuat grouped bar plot

$gbplot = new GroupBarPlot(array($b1plot,$b2plot));

$gbplot->SetWidth(0.8);

// dan masukkan ke grafik

$graph->Add($gbplot);

Berikut hasil tampilan setelah kode diatas ditambahkan.

Bentuk berikutnya yg juga sering dipakai selain garis dan batang adalah pie. Untuk membuat contoh yg Pie, kita bikin file baru. Selain contoh diatas sudah cukup ruwet dan penuh sesak, bentuk Pie biasanya berdiri sendir, tidak cocok untuk digabung dengan garis dan batang.

 Berikut contoh sederhananya:

 <?php

include ("jpgaph/jpgraph.php");

include ("jpgraph/jpgraph_pie.php");

$data = array(40,60,21,33);

$graph = new PieGraph(300,200,"auto");

$graph->SetShadow();

$graph->title->Set("Penjualan Sate");

$p1 = new PiePlot($data);

$graph->Add($p1);

$graph->Stroke();

?>

 dimana kode diatas akan membuat grafik seperti dibawah:

Tapi agak jarang orang menggunakan pie yang flat seperti diatas, kebanyakan lebih memilih yang 3 dimensi. Berikut adalah contoh yang 3 dimensi sekaligus ditambah dengan legend.

<?php

include ("jpgraph/jpgraph.php");

include ("jpgraph/jpgraph_pie.php");

include ("jpgraph/jpgraph_pie3d.php");

$data = array(40,60,21,33);

$graph = new PieGraph(300,200,"auto");

$graph->SetShadow();

$graph->title->Set("Penjualan Sate");

$p1 = new PiePlot3D($data);

//besarnya pie

$p1->SetSize(0.5);

$p1->SetLegends(array("Ayam","Kambing","Klopo","Kelinci"));

$graph->Add($p1);

$graph->Stroke();

?>

 Tampilan 3Dnya seperti ini :

Kayaknya cukup sampai ini dulu tentang fasilitas JPGraph-nya. Fasilitas2 jpgraph yang lain biasanya digunakan untuk keperluan2 yg lebih khusus, misal untuk Candle Stick di grafiknya saham / index / forex, grafik2 untuk yang ilmiah2 yang pakai rumus-rumus tertentu, dan sebagainya.

Biasanya data yang tadinya dari array, saat diimplementasikan digantiu dengan diambil dari database. Intinya adalah, ambil dari tabel, dan dimasukkan ke array.

Berikut adalah contoh jika diambil dari database mysql . Dari tabel Nilai, dengan field Nama, dan Nilai. Nama digunakan untuk sumbu X, nilai untuk sumbu Y. Grafiknya adalah nilai-nilai yang dimiliki oleh tiap-tiap nama di field nama.

<?php

include ("jpgraph/jpgraph.php");

include ("jpgraph/jpgraph_line.php");

//connect database

mysql_connect("localhost", "root", "");

mysql_select_db("student");

//select tabel

$datas = mysql_query("select * from mahasiswa");

//inisialisasi array

$nilai=array();

$nama=array();

//looping membaca isi table, dimasukkan ke array

$data=mysql_fetch_assoc($datas);

while($data)

{

            array_push($nilai,$data[nilai]);

            array_push($nama,$data[nama]);

            $data=mysql_fetch_assoc($datas);

}

// buat graph dengan auto scaling

$graph = new Graph(350,250,"auto"); 

$graph->SetScale("textlin");

// Buat garis dengan warna biru

$lineplot=new LinePlot($nilai);

$graph->xaxis->SetTickLabels($nama);

$lineplot->SetColor("blue");

// tambahkan garis diatas ke grafik

$graph->Add($lineplot);

// tampilkan graph-nya

$graph->Stroke();

Sumber: http://mysql.phi-integration.com/php-mysql/tutorial-php-chart-jpgraph-bagian-1