Lanjut ke konten

[Contoh 1] Dasar Membuat Grafik dengan JPGraph di PHP

April 19, 2012

http://bimosaurus.com/2012/04/19/contoh-1-dasar-membuat-grafik-dengan-jpgraph-di-php

 

 

Salah satu fitur penting dalam pembuatan sistem informasi berbasis web adalah pembuatan grafik. Pembuatan grafik terdapat beberapa cara antara lain dengan standard HTML, JavaScript/JQuery, dan yang paling banyak digunakan adalah dengan menggunakan fitur pembuat image JPGraph. Dalam kasus diambil di sini, akan diambil pembuatan grafik dengan JPGraph. JPGraph sendiri adalah merupakan tools berbasis PHP untuk membuat image/gambar dengan menggunakan kode-kode PHP. Tidak hanya grafik berbasis gambar, namun kita juga bisa memanfaatkan untuk keperluan Human Code Verification/CAPTCHA, pembuatan konten berbasis Image dan juga watermark untuk keperluan gambar anda.

Untuk JPGraph sendiri, dapat anda download di http://jpgraph.net/. Jika tidak salah, saat ini telah mencapai versi jpgraph-3.5.0b1. Penggunaannya adalah dengan cara melakukan include jpgraph.php yang ada pada direktori src, dan melakukan include jenis grafik yang akan digunakan. Misal akan digunakan tipe line ya tentu akan diload jpgraph_line.php. Selanjutnya, data yang akan dibuat grafik dikemas dalam variabel array, dengan memanggil fungsi-fungsi tertentu yang sudah ditentukan oleh JPGraph. Tentang fungsi-fungsi tersebut dapat dilihat dalam directori docs. Kira-kira susunan direktorinya adalah seperti berikut

 

jpgraph-3.5.0b1/

   src/

      Example

      fonts

      lang

      theme

      barcode

   docs/

 

Kali ini saya akan mencoba membuat satu contoh pembuatan grafik yang outputnya adalah image/gambar yang menampilkan grafik berformat garis/line. Untuk itu saya menggunakan include jpgraph.php dan jpgraph_line.php

Kira-kira seperti berikut:

 
<?php
include ("jpgraph-3.5.0b1/src/jpgraph.php"); //include
include ("jpgraph-3.5.0b1/src/jpgraph_line.php");
 
$data_x = array('Wonosobo','Magelang','Temanggung','Purworejo','Kebumen'); //data pada sumbu X
$data_y = array('300','200','100','200','250'); //data untuk sumbu Y
 
 
$graph = new Graph(500,450); //membuat area grafik
$graph->SetScale("textlin"); //menentukan jenis grafik
 
 
 
$graph->title->Set('Jumlah Orang Edan Karesidenan Kedu'); //membuat judul atas
 
 
$graph->yaxis->HideZeroLabel(); //menyembunyikan nilai 0
$graph->yaxis->HideLine(false); //menampakkan garis
 
$graph->xgrid->Show(); //perintah tampilkan grid sumbu x
$graph->xgrid->SetLineStyle("solid"); // jenis garis solid, atau dot atau yang lain
$graph->xaxis->SetTickLabels($data_x); //data diambil dari
$graph->xgrid->SetColor('#E3E3E3'); //warna
 
 
 
 
$garis = new LinePlot($data_y); //mulai mengeplot
$graph->Add($garis); 
$garis->SetColor("#6495ED");
$garis->SetLegend('Tingkat Edan');
 
 
$graph->Stroke(); 
 
 
?>

Kira-kira bentuk akhirnya adalah seperti berikut url ini : http://bimosaurus.com/demo/grafik_garis.php

Kira kira akan berbentuk seperti ini :

Semoga bermanfaat. Posting selanjutnya adalah menggunakan Theme, mengenali Error dan melibatkan MySQL untuk mengambil data.

About these ads

From → Tak Berkategori

2 Komentar
  1. saya ingin membuat tabel dengan grafiknya di website berbasis WP. data source yg ingin disajikan berbasis XLS atau XML. bagaimanakah cara simplenya? thanks.

    • Ada beberapa cara mas, salah satunya adalah kita membuat program aplikasi secara terpisah. Bisa juga kita mencari plugins yang tepat. Namun mencari plugins ini juga bukan hal yang mudah jika kita tidak dapat menemukannya.

      Untuk upload dari excel, aplikasinya sudah tersedia di blog sebelah milik saya dan teman teman di http://bimosaurus.com ada beberapa cara upload dari excel yang nantinya langsung akan tampil sebagai tabel. :)
      http://bimosaurus.com/tag/excel

      Bahkan dengan anda mengkopi source dari blog sebelah, anda bisa memodifikasi tabel sendiri dan langsung siap menjadi tabel yang tampil di halaman wordpress anda. Untuk menampilkan di halaman wordpressnya, bisa disiasati dengan iframe. Atau anda perlu artikel tentang itu, bisa kami siapkan

Tinggalkan Balasan

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 43 pengikut lainnya.

%d bloggers like this: