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!
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.
- Pertama-tama buat project baru menggunakan MySQL
$ rails new namaproject -d mysql$ cd namaproject - 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' -
Lalu ketik kode di bawah ini pada terminal$ bundle install - 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 - 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 - Sekarang rake seed nya, ketik kode dibawah ini di terminal
$ rake db:seed - Buat controller untuk kita membuat tampilan chart nya
$ rails generate controller home show - Buat root untuk show-nya, buka routes.rb (config/routes.rb)
root :to => "home#show" - Lanjut buka controller home (app/controllers/home_controller.rb
class HomeController < ApplicationController def show @kunjungans = Kunjungan.all end end - 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" %> - Ok semua sudah siap, kita tinggal membuat chart nya pada file show yang telah kita buat tadi (app/views/home/show.html.erb)
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 %> <%= 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
