Membuat Tampilan Grafik Pada Website
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…..
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 :
Data statis, dalam desain programnya data tersebut berada dalam listing kode dan terintegrasi didalam script program.
Data dinamis yang tersimpan dalam file text biasa. Data yang tersimpan dalam format biner pada suatu file. Data yang tersimpan didalam suatu basis data atau database.
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
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 )
{
}
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)');
$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
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");
$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");
?> 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!!!!!!
