Membuat Diagram Responsive dengan Chartist

Data merupakan elemen yang sangat penting. Kita mungkin memiliki data untuk disampaikan pada orang lain, mungkin tentang laju pertumbuhan penduduk tiap tahunnya atau jumlah jumlah kecelakaan dijalan raya tiap bulannya atau data-data lainnya. Salah satu cara yang paling efektif untuk menyampaikan data angka seperti ini ialah menggunakan bantuan diagram. Chartist akan membantu kita dalam membuat diamgram yang tidak sekedar menampilkan diagram yang statis, namun diagram yang penuh animasi serta responsive.

Chartist merupakan salah satu pustaka JavaScript yang open source untuk membuat diagram yang responsive. Chartist juga DPI independent artinya tidak peduli berapa DPI layar yang kita pakai, Chartist akan tetap tampil prima. Peramban web yang didukung juga beragam, mulai dari IE9, Firefox 31, Chrome 35, Safari 8, Android KitKat, iOS Safari 7, dll.

Beberapa framework besar dapat menggunakan Chartist dalam proyeknya dengan lebih mudah dengan pustaka Chartist khusus framework tersebut. Framework yang telah memiliki dukungan langsung terhadap Chartist adalah:

• ng-chartist (AngularJS)
• react-chartist (React)
• meteor-chartist (MeteorJS)
• tablepress_chartist (Wordpress/Tablepress)
• ember-cli-chartist (Ember)

Situs resmi Chartist dapat dikunjungi di alamat http://gionkunz.github.io/chartist-js/. Dokumentasi API Chartist terdapat di halaman API Documentation. Contoh lengkap diagram yang dibuat dengan Chartist juga dapat dilihat dibagian Example. Dibagian ini kita juga dapat berinteraksi secara langsung dengan diagram-diagram dengan mengubah kodenya (live coding).

Apabila ingin melihat source code atau berkontribusi untuk Chartist kunjungi halaman githubnya. Masih banyak kekurangan yang dimiliki oleh Chartist. Oleh karena itu setiap bantuan baik berupa kode maupun bantuan dalam menulis dokumentasi Chartist akan sangat membantu pengembangan proyek ini.

 

(bas/giokunz)