Membuat Chart di Ruby on Rails Menggunakan Chartkick

Pada post kali ini saya akan membahas dasar-dasar penggunaan chartkick untuk Ruby on Rails.

Chartkick adalah sebuah script untuk Ruby on Rails yang digunakan untuk memudahkan kita membuat sebuah grafik/diagram, ya bisa disebut perpustakaannya grafik, karena apa disebuah situs nya yaitu chartkick.com terdapat berbagai macam grafik seperti line chart, pie chart, column chart, bar chart, area chart, geo chart dan masih banyak lagi.

Yang unik pada chartkick yaitu koding nya, dimana kita hanya perlu membuat satu garis koding saja kita dapat membuat chart yang kita mau, penasaran seperti apa? yuk kita bahas di post kali ini!

Sebelum kita membuat chartkick saya akan memberi tahu anda 3 program pendukung chartkick yaitu groupdate, hightop dan active median, ya bisa dibilang mereka temennya si chartkick.

1. Pertama-tama buat project baru menggunakan MySQL
   

   $ rails new namaproject -d mysql

   $ cd namaproject

2. Buka project menggunakan text editor dan tambahkan gem pada Gemfile nya
   
   

    gem 'chartkick', '~> 1.2.4' 
    gem 'groupdate', '~> 2.1.1' 
    gem 'active_median', '~> 0.1.0'
   

    
3.  Lalu ketik kode di bawah ini pada terminal
   

   $ bundle install

4. Setelah itu kita buat sebuah model yang akan kita gunakan untuk struktur chart kita. Untuk contoh nya kita buat model Kunjungan yang biasa digunakan untuk grafik pengunjung yang mengunjungi website kita
   

   $ rails generate model Kunjungan daerah:string berkunjung_pada:datetime load_time:decimal

   $ rake db:create 

   $ rake db:migrate 

5. Sekarang kita butuh beberapa data, buka seeds.rb (db/seeds.rb)
   
   

   Kunjungan.delete_all
   Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now, load_time: 3.5
   Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now, load_time: 1.5
   Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now, load_time: 1.0
   Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now - 1.day, load_time: 4.5
   Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now - 1.day, load_time: 4.0
   Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now - 2.days, load_time: 3.5
   Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now - 2.days, load_time: 1.0
   Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now - 2.days, load_time: 3.5
   Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now - 3.days, load_time: 4.5
   Kunjungan.create  daerah: 'Bandung', berkunjung_pada: DateTime.now - 3.days, load_time: 3.0
   Kunjungan.create  daerah: 'Jakarta', berkunjung_pada: DateTime.now, load_time: 1.0
   Kunjungan.create  daerah: 'Jakarta', berkunjung_pada: DateTime.now, load_time: 2.0
   Kunjungan.create  daerah: 'Jakarta', berkunjung_pada: DateTime.now, load_time: 1.0
   Kunjungan.create  daerah: 'Jakarta', berkunjung_pada: DateTime.now, load_time: 3.0
   Kunjungan.create  daerah: 'Jakarta', berkunjung_pada: DateTime.now - 1.day, load_time: 4.0
   Kunjungan.create  daerah: 'Jakarta', berkunjung_pada: DateTime.now - 2.days, load_time: 2.0
   Kunjungan.create  daerah: 'Jakarta', berkunjung_pada: DateTime.now - 2.days, load_time: 1.0
   Kunjungan.create  daerah: 'Jakarta', berkunjung_pada: DateTime.now - 2.days, load_time: 3.0
   Kunjungan.create  daerah: 'Jakarta', berkunjung_pada: DateTime.now - 3.days, load_time: 3.5
   Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now, load_time: 2.0
   Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now, load_time: 2.5
   Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now, load_time: 1.0
   Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now, load_time: 1.5
   Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now - 1.day, load_time: 2.5
   Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now - 1.day, load_time: 4.0
   Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now - 1.day, load_time: 3.0
   Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now - 2.days, load_time: 1.0
   Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now - 3.days, load_time: 5.0
   Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now - 3.days, load_time: 4.0
   Kunjungan.create  daerah: 'Surabaya', berkunjung_pada: DateTime.now - 3.days, load_time: 5.0

   
   
6. Sekarang rake seed nya, ketik kode dibawah ini di terminal
   

   $ rake db:seed

7. Buat controller untuk kita membuat tampilan chart nya
   

   $ rails generate controller home show

8. Buat root untuk show-nya, buka routes.rb (config/routes.rb)
   
   

    root :to => "home#show"
   



9. Lanjut buka controller home (app/controllers/home_controller.rb
   
   

    class HomeController < ApplicationController
     def show
       @kunjungans = Kunjungan.all
     end
    end



10. Nah, sekarang kita masukan file Google API javascript pada layouts project kita (app/views/layouts/application.html.erb)
    
    

     <%= javascript_include_tag "http://www.google.com/jsapi", "chartkick" %> 



11. Ok semua sudah siap, kita tinggal membuat chart nya pada file show yang telah kita buat tadi (app/views/home/show.html.erb)

 Ada berbagai macam Chart :

Line Chart - Single Series

 <%= line_chart @kunjungans.group_by_day(:berkunjung_pada, format: "%B %d, %Y").count, discrete: true %>;

Line Chart - Multiple Series

 <%= line_chart   Kunjungan.pluck("daerah").uniq.map { |c| { name: c, data: @kunjungans.where(daerah: c).group_by_day(:berkunjung_pada, format: "%B %d, %Y").count }  }, discrete: true %>

Pie Chart

 <%= pie_chart @kunjungans.group(:daerah).count %>

Area Chart

 <%= area_chart @kunjungans.group_by_day(:berkunjung_pada).maximum(:load_time) %>

Column Chart

 <%= column_chart @kunjungans.group(:daerah).count %>

Bar Chart

 <%= bar_chart @kunjungans.group(:daerah).count %>

Geo Chart

 <%= geo_chart @kunjungans.group(:daerah).count %>

NB: untuk geo_chart harus menggunakan nama country kalau ingin terlihat grafik nya, kita ambil contoh menggunakan data static misalnya :

 <%= geo_chart({"France" => 10, "Indonesia" => 99, "Russia" => 45}) %>

Nah sekarang anda bisa melihat chartnya dengan menjalankan server nya dan buka localhost:3000 pada browser anda

$ rails s

kurang lebih seperti ini :

Sekian post kali ini tentang menggunakan chart pada Ruby on Rails, nantikan postingan lain yang lebih menarik lagi, stay on belajarrubyonrails.com

Bye

dicky.trifadillah@c-aio.com | Developer at C-aio indonesia