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

Gambar 1: Beberapa contoh grafik dengan pChart

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

Gambar 2: Contoh Tampilan Grafik yang Dihasilkan dengan JpGraph

,alaman % dari 6

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!

Gambar 3: P P!yGraph

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!

Gambar ": Grafik dengan #ibChart

,alaman ' dari 6

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

Gambar $: Contoh Grafik 3D dari P P%&'( Chart

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

11 Library Gratis untuk Membuat Grafik Berbasis Web | Achmatim.Net

Gambar ): *pen (lash Chart

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

11 Library Gratis untuk Membuat Grafik Berbasis Web | Achmatim.Net

Gambar +: Beberapa Contoh Chart yang Dib,at dengan (,sionCharts

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

Gambar -: Pie Chart yang Dib,at dengan Google Chart

,alaman I dari 6

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!

Gambar .: Google Chart P P #ibrary

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

Gambar 1/: ChartJ&

,alaman J dari 6

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!

Gambar 11: amChart

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

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