Visualisasi Data Menggunakan React Native Chart Kit
Cara paling mudah untuk menyampaikan suatu informasi kepada khalayak umum adalah melalui gambaran informasi a.k.a visualisasi data, baik berupa tabel, grafik atau desain infografik kekinian lainnya. Bukan sekadar enak dilihat, tujuan utama visualisasi data adalah menyampaikan data kompleks supaya lebih mudah diakses, dipahami & dianalisa untuk diambil nilai manfaatnya.
Di artikel kali ini saya akan mencoba berbagi tutorial sederhana bagaimana memvisualisasikan data di aplikasi mobile React Native, dengan menggunakan React Native Chart Kit.
1. Requirements
Saya akan fokus pada visualisasi data di React Native Android dan tidak akan membahas tata cara memulai sebuah aplikasi React Native. Jadi pastikan Anda telah memahami bagaimana dasar membangun aplikasi React Native.
Saya akan menggunakan Visual Studio Code sebagai code editor dan Genymotion sebagai Android emulator-nya. Langkah pertama, mari kita membuat sebuah project React Native menggunakan React Native CLI:
// Inisialisasi project
$ react-native init visualisasidataku// Run project, pastikan emulator telah aktif
$ cd visualisasidataku
$ react-native run-android
2. Instalasi React-Native-Chart-Kit
React Native Chart Kit merupakan salah satu package yang dirancang memanfaatkan React Native SVG untuk membangun visualisasi data di aplikasi React Native. Info selengkapnya tentang package ini dapat Anda akses di: klik sini. Selanjutnya mari kita install React Native Chart Kit & React Native SVG:
$ npm i react-native-chart-kit react-native-svgDone! Yup sesimpel itu dan kita siap untuk membangun visualisasi data di aplikasi React Native. Berikut saya sajikan beberapa jenis visualisasi data yang dapat dirancang menggunakan Chart Kit beserta code & screenshot hasilnya. Tapi sebelumnya, pastikan Anda mengimport package beserta komponen yang akan Anda gunakan, import selengkapnya:
3. Membuat Line Chart
4. Membuat Bezier Line Chart
5. Membuat Bar Chart
6. Membuat Stacked Bar Chart
7. Membuat Pie Chart
8. Membuat Progress Chart
9. Membuat Contribution Graph
Selanjutnya Anda bisa kembangkan untuk membuat aplikasi yang lebih kompleks, menarik dan informatif tentunya. Project selengkapnya silakan kunjungi github repo saya: klik di sini.
Selamat mencoba! 😊
Untuk kamu yang ingin mambangun program aplikasi baik Android maupun iOS menggunakan react native, Purwadhika Startup & Coding School memiliki program Job Connector Web & Mobile Development yang dapat kamu lihat di sini.
