11 Library Gratis untuk Membuat Grafik Berbasis Web | Achmatim.

Net
11 Library Gratis untuk Membuat Grafik
Berbasis Web
Tutorial ini ditulis oleh Achmad Solichin
dan sudah dipublikasikan di http!!achmatim.net pada tan""al 1# $esember %&1'
$alam pembuatan sistem atau aplikasi berbasis (eb) serin"kali diperlukan penya*ian data
dan laporan dalam bentuk "rafik) selain dalam bentuk tabel atau tabular. +enya*ian data
dalam bentuk "rafik memiliki keuntun"an antara lain bentuknya yan" lebih menarik serta
dapat dipahami makna keseluruhan data den"an lebih cepat. Bentuk "rafik *u"a lebih
rin"kas dibandin"kan penya*ian data dalam bentuk tabel.
$alam kaitannya den"an penya*ian data dalam bentuk "rafik) +,+ memiliki kemampuan
cukup ba"us dalam penan"anan dan pembuatan "rafik yan" dapat disa*ikan secara
lan"sun" di bro(ser -on.the.fly/. 0ita dapat membuat "rafik den"an memanfaatkan
fun"si.fun"si penan"anan "rafik yan" disediakan oleh +,+) atau men""unakan berba"ai
library siap pakai yan" dibuat khusus untuk menampilkan data dalam bentuk "rafik.
Tentunya pen""unaan library akan lebih cepat dalam pembuatan aplikasi) karena cukup
men"uasai ba"aimana men""unakan library tersebut.
1aat ini tersedia cukup banyak library +,+ yan" dibuat untuk menampilkan data dalam
bentuk "rafik. Beberapa library +,+ tersebut seba"ai berikut.
01. pChart
pChart merupakan library berbasis +,+ yan" san"at handal dalam hal pembuatan "rafik.
Grafik yan" dihasilkan dapat ditampilkan secara lan"sun" di bro(ser) dikirim melalui email
atau lan"sun" disertakan dalam file +$2. +embuatan library pChart ini men""unakan
konsep 33+ sehin""a cukup mudah di"unakan. Library yan" berlisensi GN4 G+L 5' ini
mendukun" berba"ai macam bentuk "rafik seperti "rafik "aris) batan") lin"karan) poli"on
dan seba"ainya. 1elain itu) library ini memiliki fitur menarik lainnya yaitu dapat
menampilkan bayan"an "rafik -shado(/ dan "rafik transparan.
Website resmi http!!(((.pchart.net
,alaman 1 dari 6
11 Library Gratis untuk Membuat Grafik Berbasis Web | Achmatim.Net
0. !pGraph
7pGraph merupakan library 3byek 3riented untuk membuat "rafik dan ditu*ukan untuk +,+
89 #.1. +,+ secara penuh ditulis den"an +,+ dan siap di"unakan dalam berba"ai *enis
instalasi +,+ -5ersi :G;) A+<1 atau :L;/. 7pGraph memiliki ta"line =Most po(erfull
+,+.dri5en charts>. Tentunya hal tersebut tidak berlebihan) men"in"at be"itu banyak
fitur.fitur yan" dimilikinya. 1elain mendukun" berba"ai *enis "rafik) 7pGraph *u"a
men"hasilkan "rafik den"an ukuran yan" rin"an -rata.rata % 0B sa*a/. 1elain itu *u"a
mendukun" alpha blendin") drill.do(n "raph) ad5anced "ant.charts) multiple ?.a@is dan
seba"ainya.
Website resmi http!!*p"raph.net
,alaman % dari 6
Gambar 1: Beberapa contoh grafik dengan pChart
Gambar 2: Contoh Tampilan Grafik yang Dihasilkan dengan JpGraph
11 Library Gratis untuk Membuat Grafik Berbasis Web | Achmatim.Net
0". #$#MyGraph
Library +,+MyGraph dikemban"kan oleh Marti*n Beulens men""unakan +,+ #. Walaupun
tidak banyak *enis "rafik yan" didukun" oleh library ini) namun bisa *adi alternatif ba"i kita
yan" in"in membuat "rafik sederhana dan "a mau ribet.
Website Aesmi http!!phpmy"raph.abis5mm.nl!
0%. LibChart
Lib:hart men"usun" semboyan =1imple +,+ chart dra(in" library>) dimana tetap
mempertahankan kesederhanaan dalam penerapannya. Lib:hart tidak membutuhkan
library atau ekstensi tambahan) cukup +,+ yan" mendukun" G$ dan 2reeType. 7enis
dia"ram yan" dapat dibuat den"an Lib:hart antara lain lin"karan -pie/) batan" -5ertikal dan
horiBontal/ dan "aris.
Website Aesmi http!!naku.dohcre(.com!libchart!pa"es!introduction!
,alaman ' dari 6
Gambar 3: PP!yGraph
Gambar ": Grafik dengan #ibChart
11 Library Gratis untuk Membuat Grafik Berbasis Web | Achmatim.Net
0&. #$#'SW( Chart
+,+!1W2 :hart men*a(ab kebutuhan kita yan" in"in membuat "rafik interaktif dalam
bentuk 2lash!1W2. 0arena hasilnya berupa dia"ram berbasis 2lash!1W2 maka untuk
menampilkannya) bro(ser yan" di"unakan harus sudah terinstall plu"in 2lash +layer 1& ke
atas. 2ormat data yan" =diminta> oleh library ini adalah <ML yan" dapat dihasilkan den"an
berba"ai bahasa pemro"raman seperti +,+) A1+) 71+) :2ML dan +erl. 0elebihan lainnya
adalah) library ini mendukun" lebih dari %# *enis "rafik untuk menya*ikan data secara lebih
atraktif.
Website Aesmi http!!(((.maani.us!charts!inde@.php
0). *pen (lash Chart
,ampir sama den"an library +,+!1W2 :hart) library ini *u"a men"."enerate "rafik dalam
bentuk 2lash ! 1W2. +erbedaannya adalah) 3pen 2lash :hart % men""unakan format 713N
seba"ai inputan datanya. Library yan" berlisensi LG+L ini diban"un den"an Actionscript '
dan dikompilasi den"an Adobe 2le@. 1alah satu kelebihan dari library ini adalah adanya
dukun"an -helper/ dari berba"ai bahasa pemro"raman seperti +,+) +erl) +hyton) .NCT dan
Auby. 1elain itu) "rafik yan" dihasilkan dapat disimpan dalam bentuk "ambar -ima"e/
melalui menu klik.kanan pada "rafik.
Website Aesmi http!!teeth"rinder.co.uk!open.flash.chart.%!
,alaman D dari 6
Gambar $: Contoh Grafik 3D dari PP%&'( Chart
11 Library Gratis untuk Membuat Grafik Berbasis Web | Achmatim.Net
0+. (usion Chart
7ika Anda men"in"inkan tampilan "rafik yan" terlihat lebih profesional dan dukun"an
berba"ai *enis dan bentuk "rafik) mun"kin library 2usion :hart adalah pilihan yan" tepat.
2usion:hart men"klaim telah di"unakan oleh lebih dari %1.&&& or"anisasi) D#&.&&&
pen"emban" yan" tersebar di 11E ne"ara. $en"an dukun"an puluhan *enis "rafik yan"
atraktif baik %$ maupun '$) serta berba"ai fitur hebat lainnya) pantas sa*a untuk
men""unakan library ini kita harus membelinya den"an har"a mulai dari F'66. Namun
demikian) tersedia *u"a 5ersi Trial yan" dapat diunduh secara "ratis) tentunya beberapa
batasan fitur.
Website http!!(((.fusioncharts.com!"oodies!fusioncharts.free!
,alaman # dari 6
Gambar ): *pen (lash Chart
11 Library Gratis untuk Membuat Grafik Berbasis Web | Achmatim.Net
0,. Goo-le Chart A#.
Goo"le :harts mena(arkan 5isualisasi data yan" san"at baik) mulai dari *enis "rafik yan"
sederhana hin""a kompleks. Goo"le :harts diban"un men""unakan teknolo"i 7a5ascript dan
,TML#!1GG sehin""a memiliki kompatibilitas yan" san"at baik den"an bro(ser masa kini.
Tentu sa*a) library ini berlisensi terbuka dan dapat diunduh secara "ratis. 1umber data dari
library ini tidak hanya berasal dari bahasa pemro"raman seperti +,+) A1+ dan 71+ namun
*u"a dapat berasal dari aplikasi Goo"le 1preadsheets) Goo"le 2usion Tables dan pihak keti"a
seperti 1ales2orce.
Website Aesmi https!!de5elopers."oo"le.com!chart!Hcs(91
,alaman I dari 6
Gambar +: Beberapa Contoh Chart yang Dib,at dengan (,sionCharts
Gambar -: Pie Chart yang Dib,at dengan Google
Chart
11 Library Gratis untuk Membuat Grafik Berbasis Web | Achmatim.Net
0/. Goo-le Chart #$# Library
Goo"le :hart +,+ Library merupakan (rapper yan" dibuat den"an +,+ dari Goo"le :harts
A+;. Tu*uan dari dikemban"kannya library ini adalah untuk mempermudah pen"emban"
+,+ dalam membuat "rafik den"an Goo"le :harts A+;. Ba"i Anda yan" men""unakan +,+)
library ini pantas untuk dicoba.
Website Aesmi http!!"oo"lechartphplib.cloudconnected.fr!
10. Chart!S
7ika Anda mencari library untuk membuat "rafik yan" dapat ditampilkan den"an baik di
platform (eb dan mobile) :hart71 merupakan salah satu pilihan terbaik yan" dapat Anda
temukan. :hart71 diban"un men""unakan teknolo"i ,TML# dan 7a5ascript. Library ini
menyediakan berba"ai *enis dia"ram termasuk dia"ram batan") "aris) lin"karan) donut
hin""a stock chart. $en"an format data 713N) membuat library ini dapat den"an mudah
diimplementasikan.
Website Aesmi http!!chart*s.de5e@press.com
,alaman J dari 6
Gambar .: Google Chart PP #ibrary
Gambar 1/: ChartJ&
11 Library Gratis untuk Membuat Grafik Berbasis Web | Achmatim.Net
11. amCharts
Library am:harts dikemban"kan oleh am:harts) sebuah perusahaan yan" berasal dari
Gilnius) Lithuania. Library ini *u"a dikemban"kan den"an 7a5ascript dan ,TML# sehin""a
memiliki keun""ulan dari sisi interakti5itas dan kompatibilitas bro(ser. Library am:harts
men""unakan format data 713N. Anda dapat men"unduh library am:harts secara "ratis
atau membeli 5ersi berbayarnya den"an beberapa tambahan fitur.
Website Aesmi http!!(((.amcharts.com!
0esimpulan
4ntuk keperluan pembuatan "rafik di (eb) ternyata cukup banyak library yan" tersedia baik
yan" berlisensi terbuka maupun berbayar. Beberapa diantaranya diban"un den"an
men""unakan teknolo"i +,+ murni) sementara yan" lainnya diban"un den"an teknolo"i
2lash!1W2) 7a5ascript dan ,TML#. Lalu dari sekian banyak library) mana yan" sebaiknya kita
"unakanH Ada beberapa hal yan" perlu diperhatikan saat memilih library pembuatan "rafik.
#ertama) seberapa kompleks kebutuhan *enis "rafik untuk menya*ikan data. 7ika "rafik yan"
diin"inkan hanya *enis "rafik sederhana maka pilihan librarynya tentu lebih banyak. 0edua)
sasaran dari pen""una aplikasi. ,al ini terkait den"an spesifikasi bro(ser yan" dimiliki oleh
pen""una. 7ika sasaran pen""una adalah terbatas di suatu perusahaan sa*a) maka
pen""unaan library berbasis 2lash!1W2 mun"kin tidak akan menimbulkan masalah
kompatibilitas. Namun *ika sasaran pen""unanya lebih luas dimana spesifikasi bro(ser yan"
san"at bera"am) maka perlu dipertimban"kan den"an baik *ika in"in men""unakan library
berbasis 2lash!1W2. 0eti-a) format data yan" kita miliki dan format data library yan" akan
di"unakan. Gunakan library den"an format data yan" palin" mudah disesuaikan den"an
format data yan" kita miliki termasuk dukun"an atas bahasa pemro"raman yan" kita
"unakan.
$emikian ulasan men"enai beberapa library untuk membuat "rafik berbasis (eb. 1emo"a
artikel ini bermanfaat untuk kita semua dan ma*u terus ilmu pen"etahuan ;ndonesia.
,alaman E dari 6
Gambar 11: amChart
11 Library Gratis untuk Membuat Grafik Berbasis Web | Achmatim.Net
1eferensi 2erkait
http!!stacko5erflo(.com!Kuestions!11#I%#%!free.chart.libraries.for.php
http!!free.(iB.blo"spot.com!%&&E!&J!best.free.chart.apis.html
2entan- #enulis
Achmad Solichin. Adalah Lulusan Teknik ;nformatika) 2akultas Teknolo"i
;nformasi) 4ni5ersitas Budi Luhur) 7akarta -11) %&&#/ dan Ma"ister Teknolo"i
;nformasi) 4ni5ersitas ;ndonesia -1%) %&1&/. 1aat ini sedan" menempuh
pro"ram $oktoral dalam bidan" ;lmu 0omputer di 4ni5ersitas Gad*ah Mada)
7o"*akarta. 0e"iatan sehari.hari adalah seba"ai $osen di 4ni5ersitas Budi
Luhur -http!!(((.budiluhur.ac.id/. 0e"iatan lain aktif seba"ai pro"rammer)
(eb de5eloper) system analyst) konsultan dan memberikan pelatihan di
berba"ai bidan" komputer serta membuat tutorial.tutorial praktis di bidan"
komputer. +enulis memiliki situs utama di http!!achmatim.net yan" berisi berba"ai tutorial
praktis di bidan" komputer serta menyediakan buku "ratis komputer. +enulis dapat
dihubun"i melalui email di achmad.solichinLbudiluhur.ac.id dan achmatimL"mail.com) ?M
achmatim) 2acebook achmatim dan T(itter Lachmatim.
Lisensi 3okumen
1eluruh isi dalam dokumen ini dapat di"unakan) dimodifikasi dan
disebarluaskan secara bebas untuk tu*uan pendidikan) pembela*aran dan
bukan komersial -non profit/) den"an syarat tidak men"hilan"kan) men"hapus atau
men"ubah atribut penulis dokumen ini dan pernyataan dalam lisensi dokumen yan"
disertakan di setiap dokumen. Tidak diperbolehkan men"komersialkan tutorial ini kecuali
mendapatkan i*in terlebih dahulu dari penulis.
,alaman 6 dari 6