Sejak memasang "dark" theme, saya cenderung menjadi malas menulis. Untuk sementara, dark theme saya disable dulu yaa. Terima kasih (^_^) (bandithijo, 2024/09/15) ●

بسم الله الرحمن الرحيم

Sekenario Masalah

Saya membuat sebuah side project untuk melakukan scraping data dan dicatat perhari.

Ketika data sudah mulai berkembang, maka diperlukan grafik untuk mempermudah dalam melakukan penilaian terhadap data yang telah dikumpulkan.

Pemecahan Masalah

Untuk membuat atau menambahkan grafik, JavaScript library yang terkenal adalah Chart.JS.

Nah, pada Ruby on Rails, sudah ada yang membuatkan librarynya bernama ChartKick.

Dengan menggunakan ChartKick, kita hanya perlu memanggil dengan satu baris sintaks saja. Enak banget kan!

Instalasi ChartKick

Pasang gem di Gemfile.

FILEGemfile
1
2
3
4
5
6

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

...
...
gem 'chartkick',                          '~> 3.3', '>= 3.3.1'

Kemudian install.

$ bundle install

Konfigurasi

Rails 6 / Webpacker

$ yarn add chartkick chart.js

Kemudian tambahkan pada app/javascript/packs/application.js,

FILEapp/javascript/packs/application.js
1
2

require("chartkick")
require("chart.js")

Rails 5 / Sprockets

Cukup menambahkan pada app/assets/javascripts/application.js,

FILEapp/assets/javascripts/application.js
1
2

//= require chartkick
//= require Chart.bundle

Konfigurasi di atas akan mengeset ChartKick untuk menggunakan Chart.JS.

Apabila teman-teman ingin menggunakan JavaScript chart library yang lain, seperti Google Charts dan Highcharts, dapat mengunjungi dokumentasi dari ChartKick di sini.

Sekarang tinggal implementasi.

Contoh-contoh Chart

Kita dapat langsung membuat chart dengan cara seperti ini.


Line Chart (Grafik Garis)

FILE
1

<%= line_chart a: 2, b: 5, c: 3, d: 15, e: 6, f: 12, g: 3 %>

gambar_1


Area Chart

FILE
1

<%= area_chart a: 2, b: 5, c: 3, d: 15, e: 6, f: 12, g: 3 %>

gambar_2


Column Chart (Grafik Batang Berdiri)

FILE
1

<%= column_chart a: 2, b: 5, c: 3, d: 15, e: 6, f: 12, g: 3 %>

gambar_3


Bar Chart (Grafik Batang Tidur)

FILE
1

<%= bar_chart a: 2, b: 5, c: 3, d: 15, e: 6, f: 12, g: 3 %>

gambar_4


Pie Chart (Grafik Lingkaran)

FILE
1

<%= pie_chart a: 2, b: 5, c: 3, d: 15, e: 6, f: 12, g: 3 %>

gambar_5


Dan masih banyak lagi chart yang tidak dapat saya tampilkan di blog ini, silahkan teman-teman mengunjungi halaman depan dari ChartKick.

Options

Kita juga dapat menambahkan option-option lain agar grafik yang kita tampilkan lebih informatif.

Dapat pula ditambahkan tombol download yang nanti akan disimpan dalam bentuk file gambar.

Contohnya seperti ini.

FILE
1
2
3
4
5
6
7
8
9
10
11
12

<%= area_chart({a: 2, b: 5, c: 3, d: 15, e: 6, f: 12, g: 3},
                title: "Grafik Area",
                xtitle: "X Title",
                ytitle: "Y Title",
                colors: ["#B10000"],
                download: {
                  filename: "Grafik Area.png",
                  background: "#ffffff"
                },
                dataset: {
                  borderWidth: 1
                }) %>

gambar_6


Dan masih banyak lagi option-option yang dapat digunakan, silahkan teman-teman mengunjungi dokumentasi dari ChartKick.

Implementasi

Nah, setelah teman-teman mengenal bentuk-bentuk dari chart dan option-option yang dapat digunakan, selanjutnya kita akan memasangkan dengan data yang ada di database kita.

Untuk implementasi ke dalam Rails, ada bermacam-macam.

Sekenarionya, saya memiliki model Case. Saya mau mengambil data total :positif_covid setiap harinya berdasarkan tanggal :fetched_at.

Langsung diletakkan di view template

FILEapp/views/cases/index.rb
1

<%= line_chart Case.group_by_day(:fetched_at).sum(:positif_covid) %>

Melalui Controller

Definisikan instance variable di controller.

FILEapp/controllers/case_controller.rb
1
2
3
4
5

  def index
    ...
    ...
    @data_positif_covid = Case.group_by_day(:fetched_at).sum(:positif_covid)
  end
Informasi

Saya menggunakan method .group_by_day() yang disediakan oleh groupdate gem.

Kemudian, tinggal dipakai di view template.

FILEapp/views/cases/index.rb
1

<%= line_chart @data_positif_covid %>

Nah, contoh-contoh lain, mengenai bagaimana cara mengambil data yang kita miliki, dapat teman-teman lihat pada dokumentasi ChartKick, baik di official websitenya maupun dari halaman README GitHubnya.

Pesan Penulis

Catatan ini bukan merupakan tutorial, saya hanya ingin memberikan gambaran betapa mudahnya memasang grafik ke dalam Rails menggunakan ChartKick gem.

Maka dari itu, apabila teman-teman ingin mendapatkan penjelasan yang lebih baik, silahkan mengunjungin dokumentasi ChartKick. Tentunya akan lebih up to date dari yang saya tulis di sini.

Saya juga memanfaatkan gem ini untuk menampilkan grafik seperti yang saya lakukan di bandithijo.github.io/covid19

Saya rasa hanya ini yang dapat saya tuliskan saat ini.

Mudah-mudahan dapat bermanfaat untuk teman-teman.

Terima kasih.

(^_^)

Referensi

  1. chartkick.com/
    Diakses tanggal: 2020/07/08

  2. github.com/ankane/chartkick
    Diakses tanggal: 2020/07/08

  3. chartjs.org/
    Diakses tanggal: 2020/07/08


Lisensi

logo_cc-by-nc-sa
Tulisan ini dilisensikan dengan :
Atribusi-NonKomersial-BerbagiSerupa 4.0 Internasional (CC BY-NC-SA 4.0)

Penulis

bandithijo

My journey kicks off from reading textbooks as a former Medical Student to digging bugs as a Software Engineer – a delightful rollercoaster of career twists. Embracing failure with the grace of a Cat avoiding water, I've seamlessly transitioned from Stethoscope to Keyboard. Armed with ability for learning and adapting faster than a Heart Beat, I'm on a mission to turn Code into a Product.

- Rizqi Nur Assyaufi

944e8edeccab170ecee65673676b75514b2f62ed