Membuat Grafik pada Web dengan JPGraph

Transkripsi

1 Membuat Grafik pada Web dengan JPGraph Adam Jy Prant URL Lisensi Dkumen: Cpyright IlmuKmputer.Cm Seluruh dkumen di IlmuKmputer.Cm dapat digunakan, dimdifikasi dan disebarkan secara bebas untuk tujuan bukan kmersial (nnprfit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan cpyright yang disertakan dalam setiap dkumen. Tidak diperblehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari IlmuKmputer.Cm. Berawal dari sulitnya membuat aplikasi berbasis web yang bisa menampilkan data berbentuk grafik maka pada tulisan ini mencba memberikan alternatif untuk memecahkan masalah tersebut. Aplikasi berbasis web dengan tampilan grafis sangat bermanfaat untuk menampilkan beberapa mdel data yang perlu dianalisa, lebih jauh lagi bahwa aplikasi berbasis web yang bisa menampilkan mde grafik bisa dikembangkan untuk membuat aplikasi Decisin Supprt System (DSS) atau biasa disebut sistem pendukung keputusan. Knfigurasi JPGraph sangat sederhana, tidak jauh berbeda dengan mdel penulisan sintaks bahasa pemgraman PHP. JPGraph akan dengan mudah menampilkan data yang diambil dari database dan dapat ditampilkan dalam mde yang beragam seperti pie, chart, blck dan yang paling sering digunakan yaitu diagram batang. Selamat mencba dan jangan lewatkan lanjutan dari tulisan ini. Apa itu JPGraph? Saya yakin bahwa Anda pasti pernah mendengar JPGraph. JPGraph adalah sebuah library grafik yang berrientasi byek. Kelebihan yang dimilikinya adalah kemudahan (simple) dalam penggunaanya. Hanya dengan beberapa baris kding kita bisa menghasilkan sebuah grafik yang begitu berguna. Bagaimana memulainya? 1. Dwnlad file include-nya JPGraph di 2. Letakkan file tersebut dalam sebuah flder 3. Pastikan bahwa GD library telah aktif (enable) yang akan digunakan untuk menggambar atau membuat image, cara mengeceknya mudah cukup dengan phpinf() yang akan menyatakan bahwa GD library telah aktif (enable) Kmunitas elearning IlmuKmputer.Cm Cpyright IlmuKmputer.Cm 1

2 Apa yang bisa kita lakukan dengan JPGraph? Berikut ini adalah beberapa fitur yang disediakan leh JPGraph: - Fleksibel, supprt text-lin, text-lg, lin-lin, lin-lg, lg-lin dan lg-lg - Mendukung beberapa tipe file seperti PNG, GIF dan JPG - Autscaling, penyesuaian ukuran untuk keserasian gambar - Supprt backgrund image, clr, adjustment - dan sebagainya (lengkapnya lihat di Cnth penggunaan JPGraph sederhana dengan MySQL CREATE TABLE `students` (`Name` varchar(50) default NULL, `Marks` int(11) default NULL); Hasil dari Query MySQL diatas Name Archie Andrew Hulk Jay Marks PHP Example: (!) <?php include ("c:/jpgraph /src/jpgraph.php"); include ("c:/jpgraph /src/jpgraph_bar.php"); $db = mysql_cnnect("lcalhst", "rt","") r die(mysql_errr()); mysql_select_db("test",$db) r die(mysql_errr()); $sql = mysql_query("select * FROM students") die(mysql_errr()); while($rw = mysql_fetch_array($sql)) { $data[] = $rw[1]; $leg[] = $rw[0]; } $graph = new Graph(250,150,"aut"); $graph->setscale("textint"); $graph->img->setmargin(50,30,50,50); $graph->adjbackgrundimage(0.4,0.7,-1); //setting BG type $graph->setbackgrundimage("linux_pez.png",bgimg_fillframe);//adding im age $graph->setshadw(); $graph->xaxis->setticklabels($leg); $bplt = new BarPlt($data); $bplt->setfillclr("lightgreen"); // Fill clr $bplt->value->shw(); $bplt->value->setfnt(ff_arial,fs_bold); $bplt->value->setangle(45); $bplt->value->setclr("black","navy"); $graph->add($bplt); $graph->strke();?> Kmunitas elearning IlmuKmputer.Cm Cpyright IlmuKmputer.Cm 2

3 Output JPGraph dari script diatas Kita akan mencba membuat sebuah grafik sederhana, ingat kita mulai dari perintah-perintah sederhana dan membuat sedikit latihan. Adapun urutannya sbb: a. Membuat sbuah grafik b. Membuat sebuah diagram batang c. Menutup grafik d. dan kita akan mencba mengutak-atik beberpa script JPGraph a. Membuat sebuah grafik Sekarang kita akan mencba memahami maksud dari beberapa kde prgram diatas. Hanya saja dalam artikel ini akan dijelaskan secara umum, untuk lebid detail dari fungsi dan parameter yang ada bisa di lihat di include ("c:/jpgraph /src/jpgraph.php"); include ("c:/jpgraph /src/jpgraph_bar.php"); Script diatas menunjukkan bahwa kita telah memasukkan fungsi JPGraph kedalam prgram kita. Pada direktri flder JPGraph terdapat beberapa file.php yang memiliki fungsi berbeda, misalnya untuk membuat sebuah grafik berbentuk batang (bar) maka kita harus menyertakan jpgraph_bar.php. $db = mysql_cnnect("lcalhst", "rt","") r die(mysql_errr()); mysql_select_db("test",$db) r die(mysql_errr()); $sql = mysql_query("select * FROM students") die(mysql_errr()); while($rw = mysql_fetch_array($sql)) { $data[] = $rw[1]; $leg[] = $rw[0]; } Langkah selanjutnya adalah lgin kedalam database dan melakukan query terhadap database, pada script diatas menunjukkan bahwa kita sedang mengakses tabel students. Kmunitas elearning IlmuKmputer.Cm Cpyright IlmuKmputer.Cm 3

4 $graph = new Graph(250,150,"aut"); $graph = new Graph(250,150,"aut"); fungsi ini digunakan untuk menentukan Lebar (width), Tinggi (height), dan cache file yang default nilainya adalah aut. $graph->setscale("textint"); Fungsi $graph->setscale("textint"); digunakan untuk menentukan nilai dari sumbu x dan y. Nilai x dan y bisa berupa teks atau sebuah integer sehingga untuk itu perlu diketahui beberapa kmbinasinya yaitu: - SetScale('textint'); akan merubah nilai sumbu berupa teks - SetScale('lglg'); akan merubah nilai sumbu berupa integer - SetScale('linlg'); akan merubah nilai sumbu berupa lgaritma $graph->img->setmargin(50,30,50,50); Fungsi $graph->img->setmargin(50,30,50,50); digunakan untuk mengatur perataan (margin) dengan urutan (Kiri, Kanan, Atas, Bawah) sedangkan $graph->img adalah sebuah sub-class yang sengaja dibuat untuk melakukan penambahan gambar backgrund. $graph->adjbackgrundimage(0.4,0.7,-1);//setting BG type $graph->adjbackgrundimage(0.4,0.7,-1) adalah fungsi yang digunakan untuk mengatur prperty dari gambar backgrund dengan susunan (Terang, Kntras, Buram) secara default nilainya adalah antara -1 dan 1. $graph->setbackgrundimage("linux_pez.png",bgimg_fillframe);//adding imag e $graph->setbackgrundimage("linux_pez.png",bgimg_fillframe); fungsi yang digunakan untuk manampilkan gambar pada backgrund dengan susunan ( path, image_style). Ada tiga jenis bentuk image_style yaitu: - GIMG_FILLPLOT, mengatur ukuran gambar sesuai dengan plt area - BGIMG_FILLFRAME, mengatur ukuran gambar sesuai dengan seluruh graph area - BGIMG_COPY, hanya mengkpi gambar dan meletakkannya kiri pjk atas - BGIMG_CENTER, hanya mengkpi gambar dan menegahkannya Parameter ketiga yang menunjukkan image_type, secara default bernilai aut. Frmat_image yang bisa digunakan adalah jpeg, gif dan png. $graph->setshadw(); Fungsi $graph->setshadw(); digunakan untuk memberi efek bayangan (shadw) pada grafik. Kmunitas elearning IlmuKmputer.Cm Cpyright IlmuKmputer.Cm 4

5 $graph->xaxis->setticklabels($leg); Fungsi $graph->xaxis->setticklabels($leg); adalah sub-class berupa methd SeTickLabels yang berarti bahwa nilai dari sumbu x (x-axis) adalah nama siswa. b. Membuat sebuah diagram batang (bar chart) $bplt = new BarPlt($data); Fungsi $bplt = new BarPlt($data); adalah sebuah perintah yang digunakan untuk membuat sebuah diagram balk dan plt pada grafik. Parameter tersbut mengambil data dalam bentuk array. Pada cnth kde prgram diatas saya membuat nilai siswa (students marks) yang telah diquery dalam bentuk array. Kemudian kita akan belajar tentang beberapa fungsi atau perintah yang aberkaitan dengan pengaturan prperty tampilan pada diagram batang (bar). $bplt->setfillclr("lightgreen"); // Fill clr $bplt->setfillclr("lightgreen"); untuk merubah warna cnthnya lightgreen $bplt->value->shw(); $bplt->value->shw(); untuk menampilkan nilai dengan default true atau false $bplt->value->setfnt(ff_arial,fs_bold); $bplt->value->setfnt(ff_arial,fs_bold); untuk mengatur tulisan (nama_huruf, tipe_huruf, ukuran_tulisan) cnth: untuk tebal (bld), bentuk biasa (nrmal) dan ukuran_tulisan secara default (bila tidak di isi) berukuran 10. $bplt->value->setangle(45); $bplt->value->setangle(45); digunakan untuk menentukan psisi dimana nilai akan ditampilkan pada grafik bar. Pada cnth ini kita membuat nilai 45 derajat. $bplt->value->setclr("black","navy"); Untuk menentukan nilai psitif (+) dan negative (-) kita bsa menggunakan fungsi $bplt- >value->setclr("black","navy"); perintah ini akan menampilkan nilai psitif (+) dengan warna hitam dan nilai negative (-) dalam warna navy c. Menutup grafik Kita telah membuka sebuah grafik dan menjadikannya dalam bentuk diagram batang (bar chart). Sekarang masih ada dua fungsi lagi yang akan melengkapi dan menampilkan utput. Kmunitas elearning IlmuKmputer.Cm Cpyright IlmuKmputer.Cm 5

6 $graph->add($bplt); $graph->add($bplt); akan membuat batang (bar) ditampilkan diantara grafik $graph->strke(); $graph->strke(); fungsi yang menampilkan atau mengenerate ke brwser. e. Mengutak-atik beberpa script JPGraph Pada bagian ini akan dijelaskan beberapa perintah yang akan menjadikan tampilan grafik kita tampak lebih menarik. Misalnya cbalah merubah warna pada fungsi SetFillClr dengan $bplt->setfillgradient("blue","yellw",grad_midver); dan akan menghasilkan Output berupa: Ada beberapa bentuk pewarnaan secara gradient antara lain: GRAD_VER, Vertical gradient GRAD_HOR, Hrizntal gradient GRAD_MIDHOR, Frm the center and ut, hrizntal GRAD_MIDVER, Frm the center and ut, vertical GRAD_WIDE_MIDVER, Frm the center and ut, vertical. Wide mid sectin. GRAD_WIDE_MIDHOR, Frm the center and ut, hrizntal. Wide mid sectin. GRAD_CENTER, Frm the center and beaming ut GRAD_LEFT_REFLECTION, Simulates a reflectin n the left side GRAD_RIGHT_REFLECTION, Simulates a reflectin n the right side Setelah memberi efek pewarnaan secara gradient, kitapun bisa menjadikan grafik kita dalam tampilan hrizntal caranya dengan perintah memberikan fungsi berikut $graph->$graph- >Set90AndMargin(50,40,0,20); dan hasilnya berupa: Kmunitas elearning IlmuKmputer.Cm Cpyright IlmuKmputer.Cm 6

7 Fungsi tersebut merubah grafik kedalam bentuk 90 derajat margin. Parameter yang digunakan (kiri, kanan, atas, bawah) seperti penjelasan sebelumnya. Referensi Bigrafi dan Prfil Adam Jy Prant. Lahir di Nanga Erak, 21 Npember Setelah menyelesaikan kuliah di Fakultas Teknlgi Infrmasi ITS Surabaya 2005 kemudian bekerja part time sebagai freelance di Sftware Huse BASIC MEDIA INFOTAMA di kta industri Gresik. Akif juga dikegiatan pengembangan pendidikan di EL FATA FOUNDATION diantaranya membuat Cntent Management System (CMS) dan Student Media Center (SMC) untuk pendidikan. Saat ini sedang mengembangkan aplikasi Decisin Supprt System (DSS) yang diintegrasikan dengan aplikasi berbasis web sebagai bahan analisis dari sistem pendukung keputusan manajemen. Selain itu juga memiliki minat dalam tema yang berhubungan dengan agama, kewirausahaan, investasi, dan bisnis. Infrmasi lebih lanjut tentang penulis ini bisa didapat melalui: URL. YM. adam_inf Kmunitas elearning IlmuKmputer.Cm Cpyright IlmuKmputer.Cm 7