Website yang interaktif  merupakan  keunggulan tersendiri,.biasanya interaktifitas ini berhubungan dengan pembelajaran, animasi, grafik atau cart. Website seperti ini umumnya dibangun dengan flash. Namun, tampilan interaktif tersebut juga mempunyai kekurangan, hal yang paling utama adalah browser harus mendukung flash ,teknologi ini memakan banyak memori. Selain itu, kadang flash juga sering membuat browser crash.

Sekarang era Flash sudah meredup dan teknologi ini terkenal tidak aman. Teknologi ini makin redup setelah Apple mencabut dukungannya terhadap flash disemua produknya, dari iphone , ipad dan Mac sudah tidak mendukung content flash. Artinya, jika anda paksa tetap pakai flash, siap-siap saja anda kehilangan pengunjung dari para fans apple.

Era Flash sekarang sudah diganti dengan era HTML5 dimana teknologi CSS, javascript dan HTML bisa digunakan untuk membuat aplikasi berbasis web, bersifat interaktif dan bisa menggantikan keinteraktifan flash. Kelebihan teknologi HTML5 (termasuk CSS dan Javascript ) adalah sbb:

  1. Tidak perlu belajar bahasa baru, tiga bahasa tadi adalah bahasa dasar untuk web.
  2. Multiplatform dan multi device , Halaman web bisa dibuka dengan browser apa saja dan device apa saja, termasuk Smartphone iPhone dan tablet iPad.
  3. Free, programmer tidak perlu bayar lisensi baik untuk bahasanya, library javascriptnya atau tool developmentnya, coba bandingkan dengan flash.
  4. Tidak butuh plugin. Dengan HTML5, tidak perlu lagi plugin di browser, setiap browser modern termasuk smartphone dan tablet otomatis bisa membuka halaman web dan visualisasi data mendekati sempurna.

Coba anda cari di google dengan kata kunci “List javascript library for data visualitation“. Anda akan menemukan puluhan library javascript siap pakai untuk membuat grafik dan visualisasi data. Namun, biar anda tidak bingung dalam memilih, saya merekomendasikan 5 library berikut ini.

Google chart

Web    :https://developers.google.com/chart/
Demo :https://developers.google.com/chart/interactive/docs/examples

Contoh Chart yang dibuat dengan Google Chart

Kelebihan utama dari Google chart adalah kemampuannya menampilkan banyak tipe grafik, selain itu, tersedia juga tool untuk mmebuat QR code, rumus dan kemampuan untuk menampilkan data secara realtime, misalkan data pasar saham.

Yui

Web:http://yuilibrary.com/yui/docs/charts/

Demo :http://yuilibrary.com/yui/docs/examples/

Yui adalah Yahoo UI library, mirip dengan jQUery UI, Chart yang ada di YUI tidak selengkap di Google, namun jika anda sudah terbiasa dengan YUI, akan lebih mudah mengintegrasikan dengan halaman website anda. Namun sekali lagi, tampilan chartnya kurang cantik.

sencha

Web: http://www.sencha.com/products/touch/charts
Demo :http://www.sencha.com/products/touch/demos/

Tampilan Sencha touch chart

Sencha Touch chart adalah komponen dari sencha touch. Sencha touch di desain untuk Tablet atau Smarphone android dan iOS. Walaupun demikian, produk ini juga bisa digunakan untuk web browser desktop. Kekurangannya , anda  hanya bisa menggunakan produk ini untuk keperluan open Source, jika anda ingin menggunakan untuk kepentingan komersial, anda harus membeli lisensinya.

 

jit

Web: http://thejit.org/
Demo :http://thejit.org/demos/

Infovis Javascript library demo

jit atau infovis library adalah libary javascript yang masih “saudara” dengan Sencha touch Chart. Perbedaanya, Infovis ini murni open source dan bisa anda pakai untuk project komersial.

 

Highchart

Web :  http://www.highcharts.com/
Demohttp://www.highcharts.com/demo/

Tampilan demo Highchart

Dari kelima Library diatas, Highchart merupakan library yang paling saya suka. Kelebihan utama dari Library ini adalah lisensinya open source (mirip sencha), mendukung banyak grafik, mampu membuat grafik secara dinamis, ukurannya kecil dan sangat mudah di pelajari. Kehebatan yang lain, Highchart juga bisa menggambar grafik  yang datanya berubah secara realtime. Tampilan grafik cukup sempurna di tampilkan di smartphone. Saya mencoba membuat grafik realtime yang  saya akses menggunakan Android froyo, tampilan dan loadingnya sangat cepat dan grafiknya juga tampil sempurna secara realtime. Bener bener cool!.

Catatan penting disini, pilihlah javascript library yang menurut anda paling mudah dan sesuai kebutuhan.  Semoga library diatas bisa membuat visualisasi data anda di web menjadi lebih Cool!  Happy Coding!

Penulis: Candra Adi Putra

CandraLab Studio adalah Software house di Yogyakarta, Indonesia yang fokus ke aplikasi Mobile (Android) dan Web . Hubungi saya di candraadiputra(at) gmail.com

Tagged on:         

Tinggalin komentar dong!