View
29
Download
0
Embed Size (px)
DESCRIPTION
Membuat Grafik Dengan PHP
Citation preview
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
Membuat Grafik dengan FusionCharts Menggunakan Php
dan Mysql
Bayu Lesmana Putra
Abstrak
FusionCharts merupakan sebuah komponen atau library chart yang bersifat open source
dan gratis yang dapat digunakan untuk membuat grafik data dengan animasi flash.
FusionCharts dapat digunakan dengan bahasa scripting web PHP, ASP, .NET, JSP,
ColdFusion, JavaScript, Ruby, dan lain-lain.
Penggunaan FusionCharts ini sebagai grafik data pada media web, menggunakan XML
sebagai media pembacaan data. Grafik dan animasi yang indah, sebagian besar
programmer web menggunakan library ini untuk menampilkan grafik data.
Kata Kunci: FusionCharts, PHP, Javascript
Pendahuluan
Tutorial kali ini saya membahas cara membuat grafik yang menarik dengan
menggunakan library fusionacharts (JQuery), jadi hanya membahas bagaimana
menampilkan data di database berbentuk grafik di PHP.
Dengan menggunakan PHP kita dapat membuat highchart lebih dinamis karena dapat
langsung mengakses database MySQL.
Pembahasan
Yang harus kita lakukan pertama kali adalah membuat database-nya. Pada contoh saya
kali ini saya menggunakan database 'latihan'. Kemudian dengan data table grafik
seperti gambar dibawah ini:
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
Sesudah membuat table kemudian ketiklah script program php seperti yang ada
dibawah ini dan simpan dengan nama index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
$arrData[0][2]="$Data[jumlah_a]"; $arrData[0][3]="$Data[jumlah_b]"; $arrData[0][4]="$Data[jumlah_c]";
foreach ($arrData as $arSubData) { $kategori .= ""; $data .= ""; $data1 .= ""; $data2 .= ""; $data3 .= ""; $data4 .= ""; } } $kategori .= "";
$data .= ""; $data1 .= ""; $data2 .= ""; $data3 .= ""; $data4 .= ""; $strXML .= $kategori . $data . $data1 . $data2 . $data3 . $data4; $strXML .= ""; echo renderChart("FusionCharts/FCF_MSColumn3D.swf", "", $strXML, "productSales", 500, 300); ?>
1
2
3
4
5
6
7
8
9
10
11
12
13
\\2. Grafik Kedua >>
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
14
15
16
17
18
19
20
21
$FC->setChartParams($strParam); $qr=mysql_query("select* from grafik"); while($data=mysql_fetch_array($qr)){ $FC->addChartData("$data[jumlah_a]","name=$data[nama_produk]"); }
$FC->renderChart(); echo""; ?>
Untuk FusionChart bias didownload free diwebsite ini http://www.fusioncharts.com/
Hasil dari script dan data table diatas kira kira seperti dibawah ini :
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
Penutup
Ada beberapa keuntungan menggunakan FusionCharts diantaranya sebagai berikut:
1. Animasi dan Interaktif Charts Menggunakan FusionCharts, Anda dapat dengan
cepat dan mudah membuat animasi grafik yang memiliki banyak pilihan interaktif
untuk pengguna akhir.
2. Mudah dan terintegrasi dengan JavaScript FusionCharts menawarkan pilihan
lanjutan untuk mengintegrasikan grafik dengan modul JavaScript. Anda dapat
memperbarui bagan di sisi client, memanggil fungsi JavaScript sebagai link hotspot.
3. Tidak perlu menginstall tools apapun dan sifatnya standalone Untuk menggunakan
FusionCharts, Anda tidak perlu menginstal apapun pada server Anda. Yang perlu
Anda lakukan adalah copy-paste file SWF (file inti FusionCharts) ke server Anda.
4. Mudah digunakan FusionCharts membuat diagram proses chart menggunakan XML
sebagai data, semua yang perlu Anda lakukan adalah mengkonversi data Anda ke
dalam XML menggunakan bahasa pemrograman atau bahkan menggunakan editor
teks seperti Notepad dll dan itu semua apa yang dibutuhkan untuk membuat grafik
interaktif dan animasi. Bagian terbaik adalah Anda TIDAK perlu tahu apa-apa
tentang Flash untuk menggunakan FusionCharts.
5. Berjalan pada berbagai platform web Terlepas dari bahasa apa yang digunakan,
FusionCharts dapat digunakan untuk membuat diagram dengan baik. Sejak
FusionCharts menggunakan XML sebagai antarmuka data, Anda dapat
menjalankannya pada server apapun dan terhadap segala bahasa scripting. Juga,
untuk melihat grafik, pengguna Anda hanya perlu memiliki Adobe Flash Player 6
(atau di atas), yang merupakan salah satu plugin browser yang paling digunakan di
planet ini.
6. Mengurangi beban pada server
7. Bersifat gratis
Referensi
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
http://www.mudafiqriyan.net/2012/02/fusion-charts-library-untuk-grafik-chart/
http://achmatim.net/2013/12/15/11-library-gratis-untuk-membuat-grafik-berbasis-web/
http://topidesta.wordpress.com/2012/12/20/grafik-dengan-fusioncharts-menggunakan-
php-dan-mysql/
Biografi Penulis
Bayu Lesmana Putra Adalah Lulusan Teknik Komputer,
Fakultas Teknologi Informasi Politeknik Harapan Bersama,
Tegal (D3, 2012) dan Saat ini sedang menempuh program S1 di
STMIK Raharja Tangerang dengan Jurusan Teknik Informatika
dengan konsentrasi Software Engineer. Kegiatan sehari-hari
adalah sebagai karyawan di sebuah perusahaan swasta dengan
posisi IT Engineer. Kegiatan lain sedang belajar programmer,
web developer serta sistem jaringan. Penulis dapat dihubungi melalui email di
b4yu.zty@gmail dan [email protected], YM b4yu_tk09, Facebook Bayu
Lesmana.