Membuat Tampilan Grafik Pada Website

4 11 2010

Seringkali kita temui sebuah website yang berisi data-data (entah data apapun…) biasanya dilengkapi dengan tampilan grafik untuk memudahkan pengunjung untuk melihat dan membandingkan data yang telah tersedia. Berbicara mengenai grafik dan website, keduanya memiliki fungsi tersendiri tetapi dapat juga digabungkan sehingga memiliki fungsi yang saling berkaitan. Nah, anda bingung kan??? saya sendiri juga bingung nih, pada paragraf pertama ini memang berisi kurang lebih semacam sambutan atau lebih tepatnya pengantar sebagai pemanasan saja. Ibarat orang yang ingin berenang, sebaiknya melakukan senam kecil sebagai pemanasan agar tidak terjadi kram saat berenang. Lho mas, (ada yang protes nih ceritanya) saya tidak melakukan pemanasan tetapi kok tidak kram saat berenang??? Ya mungkin aja berenangnya tidak sungguh-sungguh, cuma berendam aja sambil melihat-lihat pemandangan bagus disekitar kolam (baca = makhluk-makhluk cantik disekitar kolam renang). hehehehehehe….. lho????

Ok, paragraf kedua serius nih….

Berbicara mengenai grafik, biasanya terdapat beberapa data atau sekumpulan data yang akan direpresentasikan kedalam bentuk gambar (grafik) dengan tampilan yang bermacam-macam sesuai dengan kebutuhan (ex: grafik batang, lingkaran/pie, dll). Dalam ilmu per-website-an data tersebut dapat diinputkan secara manual dan dapat juga diambil dari basis data (database) yang telah ada. Dalam penyajiannya pun tampilan grafik juga memiliki teknik tersendiri, ada yang menampilkannya secara manual, ada juga yang menampilkannya secara real-time. Pada tulisan ini akan diulas sedikit mengenai pembuatan grafik pada halaman website dengan menampilkan data-data secara manual menggunakan modul-modul (library) jpgraph dengan bahasa pemrograman PHP (untuk pembuatan grafik dengan data real-time akan diulas pada postingan yang akan datang dilain kesempatan). Untuk mendapatkan jpgraph, anda dapat mengunjungi alamat url ini untuk mengunduh file yang dimaksud.

Ok, tidak perlu bertele-tele dan berpanjang lebar, berikutnya adalah proses atau langkah pembuatannya. Hal-hal yang perlu dipersiapkan antara lain : Kemauan dan niat untuk belajar, Personal Komputer, laptop atau sejenisnya (asal bukan kalkulator, Tv, Hp, apalagi radio), kemudian perangkat lunak yang digunakan antara lain : OS komputer (windows / linux / dlsb), apache webserver, mysql database, PHP, text editor, dlsb. Kebutuhan terakhir ini bersifat opsional : snack, kopi, pisang goreng, teh anget, stmj, nasi goreng, soto, dll. Enak tuh belajar sambil ngemil, biar cepet gendut ga kayak penulis nih, kurus ga bisa lemu-lemu (gendut) hehehehe…..

Tahap Awal Persiapan

Setelah kawan-kawan mengunduh modul/library dari jpgraph, selanjutnya adalah melakukan konfigurasi sederhana sesuai dengan petunjuk yang ada di website jpgraph tersebut. Asumsi bahwa komputer yang anda gunakan telah terkondisi dan siap digunakan untuk merancang sebuah halaman website atau dengan kata lain komputer yang anda gunakan sudah terpasang/terinstall program-program pendukung (ex : webserver, database, PHP, browser, dll). Untuk contoh pada tulisan ini penulis menggunakan spesifikasi Windows XP Operating System, Xampp yang berisi Apache webserver, MySQL Database, PHP. Program pendukung lainnya, penulis menggunakan notepad++ sebagai editor script / source code.

Data Source

Langkah selanjutnya adalah mempersiapkan data yang akan kita plot kedalam grafik, secara umum sumber data yang akan diplot dalam grafik dapat berasal dari :

  1. Data statis, dalam desain programnya data tersebut berada dalam listing kode dan terintegrasi didalam script program.
  2. Data dinamis yang tersimpan dalam file text biasa.
  3. Data yang tersimpan dalam format biner pada suatu file.
  4. Data yang tersimpan didalam suatu basis data atau database.
  5. Data yang dikirim ke script melalui parameter URL, baik menggunakan metode GET maupun POST.

Setelah kita tentukan sumber data, selanjutnya kita tentukan grafik apa yang cocok untuk data tersebut, apakah grafik batang (bar), grafik garis (line), ataukah grafik lingkaran (pie). Pada contoh tulisan ini hanya akan dijelaskan beberapa type dari sumber data, untuk selanjutnya kawan-kawan dapat memodifikasinya sesuai dengan kebutuhan.

Graph from External File Data Source

Pada sub bagian artikel ini penulis mencoba untuk share kepada kawan-kawan tentang pembuatan grafik pada website dengan sumber data yang berasal dari file lain (external file) yaitu dengan data yang berasal dari sebuah file text. Langkah awal adalah mempersiapkan data (data sembarang) yang kita tulis pada sebuah file text (text editor), seperti notepad misalnya.

ex :

0  0
1  2
2  3
3  3
4  5
5  5
6  2
4  9

Kemudian ketikkan source code PHP, sebagai berikut :

<?php
require_once ('modul/jpgraph.php');
require_once ('modul/jpgraph_line.php');
require_once ('modul/jpgraph_bar.php');

function readdata($aFile, &$aData1, &$aData2)
{
 $lines = @file($aFile,FILE_IGNORE_NEW_LINES|FILE_SKIP_EMPTY_LINES);
 if( $lines === false )
 {
 throw new JpGraphException('Can not read data file.');
 }
 foreach( $lines as $line => $datarow ) {
 $split = preg_split('/[\s]+/',$datarow);
 $aData1[] = substr(trim($split[0]),0,4);
 $aData2[] = trim($split[1]);
 }
}

$xdata = array();
$ydata = array();
readdata('external.txt',$xdata,$ydata);

$width = 400; $height = 200;

$graph = new Graph($width,$height);

$graph->SetScale('intint');

$graph->title->Set('Graph from External File Data Source');

$graph->xaxis->title->Set('(X-axis)');

$graph->yaxis->title->Set('(Y-Axis)');

$lineplot=new LinePlot($ydata);

$graph->Add($lineplot);

$graph->Stroke();

?>

Results :

Gambar 1. Hasil grafik dari external data text.

Keuntungan dari jpgraph ini adalah grafik yang ditampilkan pada halaman website dapat kita simpan sebagai file image (gambar). Selain itu, source code atau script pembangun grafik dapat kita panggil sebagai perintah baru untuk menampilakan (perintah img src pada html) gambar pada script atau code lain.

Graph From Database Data Source

Grafik dengan sumber data dari external file sudah kita buat, selanjutnya adalah membuat grafik dari sumber data yang lain. Pengambilan data dari database sangat sering kita jumpai, karena dengan cara ini menurut penulis pribadi adalah sebuah metode yang efisien, untuk lebih jelasnya mari kita lihat yang satu ini :

  • Membuat Database / Database Design

Langkah awal pada bagian ini adalah menyiapkan database sebagai wadah atau tempat penyimpan data yang akan diplot ke grafik. Data dapat berupa nilai yang bersifat integer maupun nilai yang bersifat karakter, tetapi kembali lagi ke tujuan awal dan kebutuhan kawan-kawan dalam menginterpretasikan data kedalam tampilan grafik. Sebagai contoh nih, enak’an pakai studi kasus aja ya ?? gimana, setuju ngga ? setuju aja ya…..enak kok, nggak sakit…paling kayak di gigit semut…hehehe…

Ok, begini ceritanya (studi kasus)…. Pada suatu hari yang cerah, matahari muncul di balik pepohonan. Di pagi hari yang cerah itu si-budi mengawali hari pertama kuliahnya di suatu perguruan tinggi favorit di Negri Antah Berantah. Kemudian si-budi berkenalan dengan teman-teman barunya yang notabene berasal dari berbagai penjuru kota. Setelah selesai berkenalan, budi menghitung total mahasiswa (termasuk budi juga lho) yang berasal dari Kota-A sebanyak 5 Orang pria 3 orang wanita, dari Kota-B sebanyak 8 orang pria 4 orang wanita, dari Kota-C sebanyak 2 orang pria 3 orang wanita, dari Kota-D sebanyak 9 orang pria 4 orang wanita, dari Kota-E 3 orang pria 5 orang wanita, dan dari Kota-F 7 orang pria 2 orang wanita.

Nah, dari cerita singkat tadi kita buat grafiknya dengan data yang kita inputkan terlebih dahulu pada database. Untuk itu, mari kita buat database dan tabelnya terlebih dahulu.

Gambar 2. Database Studi Kasus.

  • Creating Graph From Database Data Source

Setelah database siap dan data sudah dimasukkan ke dalam tabel, maka grafik siap dihidangkan (ditampilkan). Permasalahan klasik yang muncul (terutama terjadi pada pemula) adalah ketika kita sudah mendapatkan data-data tersebut, kemudian menjadi bingung saat ditanya “Ingin membuat grafik seperti apa???” atau “Data apa yang akan dibandingkan???” Pertanyaan-pertanyaan tersebut selalu berkecamuk didalam pikiran, untuk itu sebelum membuat grafik terlebih dahulu kita tentukan permasalahannya. Pada contoh studi kasus ini, penulis hanya memberikan contoh sederhana dengan menampilkan data total mahasiswa (Pria dan Wanita) tiap-tiap kota untuk ditampilkan ke dalam grafik batang.

Berikut adalah resepnya (source code) :

<?php
include ("modul/jpgraph.php");
include ("modul/jpgraph_line.php");
include ("modul/jpgraph_bar.php");
mysql_connect("localhost","root","password");
mysql_select_db("grafik");
$dataKota = array();
$dataTotal = array();
$query = "SELECT kota, pria + wanita as tot FROM asal_kota";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
 array_unshift($dataTotal, $data['tot']);
 array_unshift($dataKota, $data['kota']);
}
$graph = new Graph(480,320,"auto");
$graph->SetScale("textlin");
$bplot3 = new BarPlot($dataTotal);
$bplot3->SetFillColor("red");
$bplot3->value->show();
$gbplot = new GroupBarPlot(array($bplot3));
$graph->Add($gbplot);
$bplot3->SetLegend("Total Mahasiswa");
$graph->legend->Pos(0.01,0.8,"right","center");
$graph->img->SetMargin(50,30,40,30);
$graph->title->Set("Grafik Total Mahasiswa Tiap Kota");
$graph->xaxis->title->Set("Kota");
$graph->yaxis->title->Set("Jumlah Mahasiswa");
$graph->xaxis->SetTickLabels($dataKota);
$graph->title->SetFont(FF_FONT1,FS_BOLD);
$graph->Stroke();
?>

Results :

Gambar 3. Grafik batang (bar) dengan sumber data yang di ambil dari database.

Source Code Request

Apabila kawan-kawan ingin memperoleh source code lengkap pembuatan grafik seperti diatas, sebagai bahan referensi maupun untuk dimodifikasi ulang silahkan request by email: heruwidakdo@gmail.com (ada yg protes nih critanya : lho, kok pelit sih? msk gt aja ga mau kasih link-nya) —> nah, itu dia masalahnya… setelah saya kompres file nya agak gede dikit, koneksi modem saya ngga kuat buat ngupload. Maklumlah, rakyat kecil buat internetan aja susahnya minta ampun, padahal buat sharing lho… di gratiskan aja tuh biaya-biaya internet, biar maju pendidikan di negara kita tercinta. OK, setuju kan ??? hehehe…..

Penutup

Sampai sekian dulu kawan artikel kali ini yang saya beri judul “Membuat Tampilan Grafik Pada Website” sebenarnya masih sangat banyak sekali yang ingin penulis sampaikan, berhubung waktu, tenaga, dan pikiran yang terbatas dengan berat hati kita harus berpisah untuk sementara waktu. Ibarat pepatah mengatakan “Jika ada sumur di ladang boleh kita menumpang mandi, kalau ada waktu luang ijinkan saya menulis lagi ” segala waktu yang tersita untuk membaca tulisan ini dan juga kesalahan dalam penulisan, penulis menyampaikan permintaan maaf yang sedalam-dalamnya (sedalam lautan) maklum, penulis juga newbie nih…..hehehe….di lain kesempatan mungkin kita bisa share tentang pembuatan grafik dengan cara maupun metode yang berbeda.  So, tunggu aja yach….hihihihi… Sampai Jumpa & Semoga Bermanfaat…….MERDEKA!!!!!!

Regards

 

 

 

Surabaya, 05 November 2010

 

Refference

http://google.com/

http://jpgraph.net/

http://rosihanari.net/

Thanks To

GOD (for Idea n Inspiration)

Family (for ur affection)

My Friends (for discussion)


Actions

Information

6 responses

7 11 2010
mammoth

this is a good post
Master Heru,komponen atau library jpgraph tu sudah tersedia atau kita harus instal dulu atau download??
grafiknya itu berubah karena ada perubahan data secara real time atau datanya disimpan dulu baru dipanggil lewat perintah script baru ditampilkan??
maaf baru pemula dan barusan belajar.
master,kalo bisa ditambah materi tutorial web design.
suwun nggeh master……

7 11 2010
heru widakdo

Thanks udah menyempatkan membaca tulisan ini paduka…..

library jpgraph merupakan sebuah file2 yang berisi listing / source code php yang berisi class-class atau rutin-rutin function program. Kita harus mendownloadnya terlebih dahulu sebelum menggunakan / menampilkan grafiknya. Setelah kita download, kita hanya perlu memanggil fungsi-fungsi tadi untuk menginterpretasikan data ke dalam sebuah tampilan grafik.

Dengan jpgraph ini, grafik dapat dikatakan berubah secara real-time, tetapi dengan catatan perubahan tersebut bergantung pada teknik yang di pakai dalam mendesain halaman web tersebut. mengacu pada desain program lho, bukan desain grafisnya….. sbg contoh, jpgraph ini kita padukan dengan web yang dalam desain programnya menggunakan teknik AJAX (Asynchronous JavaScript and XMLHTTP). Atau dengan cara lain misalnya (manual) kita harus sering2 me-reload halaman web tersebut untuk melihat perubahan data yang terjadi pada grafik tersebut. Jadi kita tidak perlu memanggilnya lewat perintah / script baru yang seperti saudara sampaikan….

sama-sama paduka, saya juga masih dalam tahap belajar…. cuma ingin share aja barangkali ada kawan yang ingin menambahkan…..

Thanks

8 11 2010
sagan

apik mas widodo… penjelasane tentang grafik sangat renyah sekali dan mudah dimengerti… apalagi untuk sebuah kosakata yang mengambil data secara realtime… dengan begitu memudahkan kita membuat tafsiran perhitungan dengan grafik tanpa perlu susah payah persentasi segala atau mengirimkan data melalui manual…
Pertanyaan:
1. bagaimana lok tidak menggunakan xampp tapi appserv-win32-2.5.9. atau versi wamp lainnya? pasti tentu juga scrip php nya juga beda??.. (eh memberi pertanyaan dijawab sendiri hehehe ^_^)
2. semisal data grafik itu ada kalanya pasti dibuat patokan untuk disimpan atau di arsip bagaimana lok data grafik ini bisa di inpor ke dalam Excel biasanya kan orang kantoran nich… riques hehe….

ya sekian comment dari orang awam seperti saya… mohon maaf lak comment
kurang berbobot hehe….

8 11 2010
heru widakdo

Wah, bung sagan ini bisa aja….renyah seperti krupuk / peyek nih ??? hehehe…
ok, saya akan berusaha menjawab pertanyaan bung sagan nih, tetapi semampu dan sepengetahuan saya lho….maklum saya juga pemula nih….hehehe…
1.) Kalau menurut saya nih, perubahan dari pemakaian perangkat lunak seperti xampp, wampp, lampp, dlsb atau bahkan pemakaian Operating system pun tidak akan mempengaruhi script php secara signifikan…..dalam artian walaupun kita menggunakan perangkat lunak yg lain, code / script php untuk menginterpretasikan data ke alam grafik tidak akan berubah. Kemungkinan yang sering muncul ketika kita menggunakan perangkat lunak / OS lain hanya sebatas konfigurasi / setting-setting sederhana.
Pada dokumen manual jpgraph terdapat perintah “Make sure GD extension is enabled in your php.ini file (check the output from phpinfo() )”
hal tersebut mengacu pada konfigurasinya saja, tidak merubah script php pada umumnya.

2.) Pada tulisan diatas terdapat beberapa contoh peggunaan grafik dari sumber data / Data Source yang berbeda (sumber data tidak harus dari database), seperti :

1. Data statis, dalam desain programnya data tersebut berada dalam listing kode dan terintegrasi didalam script program.
2. Data dinamis yang tersimpan dalam file text biasa.
3. Data yang tersimpan dalam format biner pada suatu file.
4. Data yang tersimpan didalam suatu basis data atau database.
5. Data yang dikirim ke script melalui parameter URL, baik menggunakan metode GET maupun POST.

Jadi, menurut saya kalau data yang di simpan ke dalam file lain (ex : text, excel, dll) dapat kita interpretasikan ke dalam grafik berbasis web tentu nya……..

sekian bung sagan, jawaban dari saya….mohon maaf kalau kurang puas dengan jawaban dr saya, maklum nih pemula alias newbie…hehehhe…

Sekali lagi saya ucapkan Terima Kasih atas kunjungan dan komentar (saran dan kritik) yang kawan berikan….

Semoga bermanfaat.

Thanks

25 07 2013
Rainhard Habel

agan heru, mau nanya dong kalau eror ini kenapa yah?

” Empty input data array specified for plot. Must have at least one data point.”

saya ngetes syntax yang dikasih ada di web agan heru muncul eror itu gan

mohon bantuannya, makasih

18 01 2015
khalida zia (@secretziaa)

request sorce code nya ke khalidazia26@ymail.com ya pak mohon bantuan nya makasih ya pak

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: