Membuat Grafik Column Bar Dengan PHP Mengunakan Fusion Chart

Membuat Grafik Column Bar Dengan PHP Mengunakan Fusion Chart

Tyan Suhesti [email protected] :: http://tyansuhesti.blogspot.com

Abstrak Seiring perkembangan teknologi yang maju, begitu pula cara penyajian data di promograman, termaksud PHP, tidak lagi hanya dapat di sajikan secara teks, tapi dapat juga di sajikan dalam berbentuk grafik dengan mengunakan plugins fusionchart.

Kata Kunci: PHP, Pemograman, Grafik, Chart, Fusionchart

Pendahuluan Mungkin kita sering melihat penyajian data secara text, misalnya seperti dibawah ini:

Gambar 1

Lisensi Dokumen: Copyright © 2008-2014 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

Nah, tentu dan bosan dengan penyajian data seperti tersebut, data yang di tampilkan secara teks kurang menarik dan agak lama untuk melihat kesimpulan data tersebut. Penulis ingin menbuat tutorial penajian data secara grafik menggunakan fusion chart, fungsi fusion chart disini tidak hanya dapat membuat grafik secara global column bar saja tapi juga bentuk lain, seperti, Diagram Pie, Line, Stake, Dashbord dan lain lain. Tetapi penulis hanya memberi contoh membuat grafik dengan column bar saja dan data yang di ambil dari database.

Pembahasan Langkah pertama adalah membuat database dahulu: Saya asumsikan pembaca sudah mengerti membuat database Saya membuat table absen_guru dengan field id, nama_guru, tepat_waktu, tidak_tepat_waktu, dan saya isi seperti tampilan di bawah.

Gambar 2

Lisensi Dokumen: Copyright © 2008-2014 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

Table di atas hanya menjelaskan berapa kali guru tepat waktu dan tidak tepat waktu.

Langkah kedua adalah mendownload plugins fusionchart di alamat, fusionchart.com Maaf saya tidak menampilkan screenshotnya, karena penulis sedang tidak koneksi internet. Hehehe... (Maklum Mahasiswi lagi irit) Sebagai gantinya saya screen shot isi file fusionchart yg saya punya

Gambar 3 Diatas adalah tampilan file fusionchart saya, gak usah lama lama lagi langsung ajah kita koding yuk !! Buat File Baru saya asumsikan kalian semua membuat file dengan nama index.php

Lisensi Dokumen: Copyright © 2008-2014 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

index.php
////////// Insert fungsi dari Fusion Chart /////////////////////// include "FusionCharts/class/FusionCharts_Gen.php"; include "FusionCharts/class/FusionCharts.php"; ///////////////////////////////////////////////////////////// ?>

<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8">

<script language='Javascript' src="FusionCharts/FusionCharts.js">

Gambar 4

Lisensi Dokumen: Copyright © 2008-2014 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

Script di atas adalah untuk membuat koneksi database dan dan insert fungsi yang di buat oleh fusionchart dan plugins fusion chartnya. Coding selanjutnya adalah

# Setting Relative Path of chart swf file. $FC->setSwfPath("FusionCharts/"); # Store chart attributes in a variable $strParam="caption=Grafik xAxisName=Nama Guru ;yAxisName=Tepat Presentasi Waktu; Tepat Waktu yAxisMaxValue=100; Kehadiran Guru; decimalPrecision=0; showPercentValues='100'; formatNumberScale=0; "; # Set chart attributes $FC->setChartParams($strParam); $sql = "SELECT * FROM absen_guru "; $result = mysql_query($sql); $num_rows = mysql_num_rows($result); if(mysql_num_rows($result) > 0){ ?> Gambar 5 Lisensi Dokumen: Copyright © 2008-2014 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org Saya akan menjelaskan coding di atas $FC = new FusionCharts("Column3D","700","350"); Coding ini berfungsi untuk menetukan ukuran dan type grafik yang akan di tampilkan # Setting Relative Path of chart swf file. $FC->setSwfPath("FusionCharts/"); Script ini menentukan dimana file swfnya di simpan # Store chart attributes in a variable $strParam="caption=Grafik Presentasi Tepat Waktu Kehadiran Guru; xAxisName=Nama Guru ;yAxisName=Tepat Waktu; yAxisMaxValue=100; decimalPrecision=0; showPercentValues='100'; formatNumberScale=0; "; Script ini untuk menentukan judul dan nama varibel lainnya sesuai dan tergantung kebutuhan. Gambar 6 Lisensi Dokumen: Copyright © 2008-2014 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org Gambar 7 Selanjutnya saya akan menjelaskan gambar coding 6 dan 7 di atas Di Gambar 6 Itu seperti yang kalian mungkin sudah tahu adalah untuk coding membuat table, dan coding while($row = mysql_fetch_array($result)){ $nama_guru = $row['nama_guru']; $tepat_waktu = $row['tepat_waktu']; $tidak_tepat_waktu = $row['tidak_tepat_waktu']; $total_hadir = $tepat_waktu+$tidak_tepat_waktu; $fraction = $tepat_waktu/$total_hadir; $fraction_tidak_tepat_waktu = $tidak_tepat_waktu/$total_hadir; $percentage_tepat_waktu= round($fraction*100); $percentage_tidak_tepat_waktu= round($fraction_tidak_tepat_waktu*100); Dan coding di atas saya buat untuk menentukan varibel total hadir dan persentase tepat waktu dan tidak tepat waktu dalam persen Selanjutnya di Gambar 7 terdapat coding Lisensi Dokumen: Copyright © 2008-2014 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org $FC->addChartData("$percentage_tepat_waktu","name=$nama_guru"); Coding di atas adalah untuk membuat data di grafik $FC->renderChart(); Dan Coding renderchart adalah untuk menampilkan grafiknya Jika Sudah Jadi Akan Terlihat Seperti Di Bawah ini : Sekian Tutorial Membuat Grafik Dengan PHP Mengunakan Fusion Chart Dari saya, terimakasih atas waktunya untuk membaca postingan saya. Penutup Lisensi Dokumen: Copyright © 2008-2014 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org Kesimpulan saya adalah, menampilkan data dengan grafik lebih menarik di bandingan hanya teks saja, dan juga dapat di jadikan sebagai alat untuk penunjang keputusan jiak mengunakan grafik dengan data yang tepat. Untuk Source codenya mungkin nanti bisa saya upload Terima Kasih :D Referens http://www.fusionchart.com Biografi Nama Saya Tyan Suhesti, saya tinggal di jatake, saya anak ke 2 dari 3 bersaudara.Saya lulusan SMK BHAKTI ANINDYA, sekarang saya kuliah di PERGURUAN TINGGI RAHARJA angkatan 2011 Jurusan Sistem Informasi Manajemen, hobi saya baca buku, browsing internet. Lisensi Dokumen: Copyright © 2008-2014 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org × Report "Membuat Grafik Column Bar Dengan PHP Mengunakan Fusion Chart" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close