Cara Membuat Grafik Menggunakan Ruby on Rails

Pastikan Ruby on Rails sudah terinstal di sistem Anda. Untuk tutorial ini, Anda juga perlu menambahkan gem Chartkick dan Groupdate ke Gemfile Anda.

#Gemfile
gem 'chartkick'
gem 'groupdate'

Lalu, jalankan perintah bundle install untuk menginstal gem tersebut.

bundle install

Jika belum punya proyek Rails, Anda bisa membuatnya dengan perintah berikut untuk Rails 7:

rails new chart_app -d postgresql (Rails 7 uses Importmap by default)

Catatan: Ganti postgresql dengan mysql atau sqlite3 sesuai database pilihan Anda.

Mengonfigurasi Chartkick Menggunakan Importmap

Di config/importmap.rb, tambahkan:

pin "chartkick", to: "chartkick.js"
pin "Chart.bundle", to: "Chart.bundle.js"

Dan di app/javascript/application.js, tambahkan:

import "chartkick"
import "Chart.bundle"

Untuk esbuild, Webpacker, atau opsi bundler JS lainnya, silakan lihat dokumentasi Chartkick.

Membuat Grafik dengan Chartkick dan Groupdate

Persiapan Model dan Data:

Misalkan Anda punya model User dengan timestamp created_at. Kita akan membuat grafik jumlah pengguna yang dibuat per hari.

class UsersController < ApplicationController
  def index
    @users_by_day = User.group_by_day(:created_at).count
  end
end

User.group_by_day(:created_at).count menghasilkan query SQL sederhana yang menghitung jumlah pengguna yang dibuat per hari.

Membuat View Index:

Di view Anda, gunakan helper line_chart dari Chartkick untuk membuat grafik:

<!-- app/views/users/index.html.erb -->
<h1>Users Registered Over Time</h1>
<%= line_chart @users_by_day %>

Saat Anda menjalankan server dengan rails s dan membuka halaman tersebut, Anda akan melihat grafik garis yang menunjukkan jumlah pengguna yang dibuat setiap hari.

Menyempurnakan Grafik Anda

Chartkick memungkinkan Anda menyesuaikan grafik dengan berbagai opsi seperti warna, pesan, dan lainnya. Berikut contoh untuk menyesuaikan grafik sebelumnya:

<%= line_chart @users_by_day, colors: ["#b00"], message: "Loading...", library: { backgroundColor: "transparent" } %>

Membuat Berbagai Jenis Grafik

Chartkick mendukung berbagai jenis grafik. Berikut contoh grafik lain yang bisa Anda terapkan.

Grafik Pai

Untuk membuat grafik pai yang memvisualisasikan distribusi peran pengguna di aplikasi Anda:

Ruby:

@user_roles = User.group(:role).count

erb:

<%= pie_chart @user_roles %>

Grafik Kolom

Untuk memvisualisasikan jumlah postingan yang dibuat pengguna setiap bulan:

Ruby:

@posts_by_month = Post.group_by_month(:created_at).count

erb:

<%= column_chart @posts_by_month %>

Grafik Area

Untuk membuat grafik area, mirip grafik garis tetapi terisi:

erb:

<%= area_chart @users_by_day %>

Kesimpulan

Dengan Chartkick, Anda bisa membuat grafik dinamis di aplikasi Ruby on Rails dengan cepat dan mudah hanya dengan beberapa baris kode. Dengan mengintegrasikan grafik ini ke aplikasi Anda, Anda dapat menyajikan visualisasi yang membantu menggali insight dari data dan meningkatkan proses pengambilan keputusan bagi pengguna.

Anda mungkin juga menyukai artikel berikut:

• Cara Membuat Migration Rails
• Cara Melakukan Rollback Migration Rails