Making Graph in ReactJS

Kembali lagi di postingan saya, Zahra, salah satu hipster kesayangan kalian yang ada di Allocateam :)

Pada sprint task minggu ini, saya mendapat task untuk membuat tampilan graph yang nantinya akan menggambarkan pengalokasian untuk para penyuluh. Graph ini nantinya akan memberikan gambaran apakah pengalokasian sudah cukup merata atau belum. Pastinya, graph ini akan diimplementasikan menggunakan ReactJS. Apakah saya sudah pernah membuat graph dalam ReactJS? tentu belum. Mengapa saya mengambil task ini? tidak tahu, saya tertarik saja ingin tau bagaimana membuat graph dalam ReactJS karena terlihat seru, ya walaupun lagi-lagi saya mengerjakan front-end things. Seperti biasa, PPL selalu secara tidak langsung menuntut saya untuk mempelajari hal-hal baru. Jujur, setelah saya mempelajarinya, tidak begitu sulit. Namun tentunya pencarian yang saya lakukan cukup panjang prosesnya, dan saya akan menceritakannya dalam post saya kali ini.

Hal pertama yang saya lakukan ialah memantapkan hati untuk menggunakan library javascript dalam membuat chart. Sebenarnya setelah saya mencari-cari, saya menemukan panduan untuk membuat chart tanpa menggunakan library javascript. Tapi menurut saya, banyak hal yang perlu saya pelajari lebih lanjut untuk dapat mengerti lebih dalam panduan tersebut. Akhirnya pun saya memantapkan hati untuk menggunakan library saja. Setelah itu, saya pun menemukan 3 library javascript yang biasanya banyak digunakan oleh orang-orang dalam membuat suatu chart. Sebelumnya, saya dan salah satu anggota tim allocateam (Bthari) sudah mendiskusikan struktur data bagaimana yang ingin digunakan untuk menjadi data pada graph. Hal ini sejujurnya sangat menjadi patokan saya dalam mencari library yang cukup kami gunakan. Berikut adalah library - library yang pernah saya coba gunakan untuk membuat chart :



Library pertama yang saya temukan setelah saya googling ialah ReactD3. Saya mempelajarinya dengan diawali membaca dokumentasi yang diberikan. Dokumentasi yang diberikan sebenarnya cukup membantu dan cukup jelas. Hanya saja, pada penjelasan mengenai step instalasi masih kurang detail. Saya juga sudah mengikuti step-step yang diberikan dalam instalasi, namun banyak terjadi error yang tidak jelas. Selain itu, sedikit sekali diskusi yang membahas mengenai ReactD3 ini sehingga menyebabkan minimnya informasi yang dapat membantu menyelesaikan masalah yang saya rasakan. Selain itu juga, ReactJS ini sepertinya terakhir kali dikembangkan yaitu pada tahun 2015 maka dari itu mungkin ada beberapa hal yang sudah tidak sesuai dengan perkembangan pada saat ini. Ya, Itu merupakan asumsi saya. 


Library kedua yang saya coba ialah Chartkick. Library ini cukup menarik perhatian saya dikarenakan library ini cukup berjiwa sosial dikarenakan pada web mereka membantu menggalang dana untuk melawan tingkat kematian di dunia akibat malaria. Ya, cukup out of topic memang hehe. Back to the topic, secara garis besar library ini cukup menarik dikarenakan versi yang disediakan beragam tidak hanya dalam ReactJS. Namun, dokumentasi yang diberikan cukup tidak jelas sehingga kejadiannya seperti sebelumnya ialah menghambat saya dalam melakukan instalasinya. Selain itu juga, jenis data yang dapat diolah juga tidak sesuai dengan kesepakatan yang sebelumnya sudah saya buat bersama Bthari. 


Nah, untuk library kali ini, dokumentasinya sudah tidak usah ditanya lagi. Fusion Chart memiliki dokumentasi yang cukup lebih baik dibandingkan yang lainnya. Banyak juga actions yang dapat di handle dalam Fusion Chart. Namun sayang sekali, Fusion Chart berbayar. Jadi untuk dapat mengexplore lebih dalam dibatasi oleh biaya yang harus dikeluarkan. Oleh karena itu saya memutuskan untuk tidak menggunakan library ini. Namun, saya sangat merekomendasikan library ini (apabila kalian siap untuk mengeluarkan budget lebih ya!)


Pencarian tentunya memiliki akhir, saya percaya itu. Pencarian saya berakhir pada library ini. Library ini memenuhi semua kriteria yang sudah saya buat untuk mengembangkan chart saya. Rechart memiliki dokumentasi yang sangat lengkap juga seperti Fusion Charts dan tentunya gratis! Selain itu, ini satu-satunya library yang tidak menyebabkan masalah pada saat saya melakukan instalasinya. Pilihan chart yang diberikan juga paling beragam dibanding dengan library-library yang sudah saya bahas sebelumnya. Selain itu, format data yang digunakan juga sesuai dengan format yang sudah saya dan Bthari tetapkan sebelumnya. Perfect!

Kesimpulannya, library-library yang saya sebutkan diatas memiliki kekurangan dan kelebihannya masing-masing. Semoga pengalaman saya diatas dapat membantu Anda apabila sedang ingin membuat suatu chart pada aplikasi Anda. Sekali lagi, pendapat diatas murni pendapat pribadi saya. Silahkan kalian coba ya untuk mendapatkan pengalaman Anda masing-masing! :)

0 komentar:

Post a Comment