[Ruby] [For those who create portfolios] How to use chartkick

less than 1 minute read

chartkick is a library that makes it very easy to create charts Screenshot 2020-07-20 21.54.12.png

environment

Ruby 2.5.3 Ruby on Rails 5.2.4 chartkick 3.3.1

procedure

1. Installation

Gemfile


 gem "chartkick"
 $ bundle install
2.javascript read

app/javascripts/application.js


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

I’m ready. You may want to drop the server once and start rails s again.

option

ID, width, height

<%= line_chart data, id: "users-chart", width: "800px", height: "500px" %>

Axis title

<%= line_chart data, xtitle: "Time", ytitle: "Population" %>

Combining these gives you this feeling.

Screenshot 2020-07-20 21.51.41.png

Prepare sales (result), sales date (result_date) in managemant,

app/controllers/managemants_controller.rb


def index
    @managemants = Managemant.all
  end

app/models/managemant.rb


Data for # chartkick
  def self.chart_date
    order(result_date: :asc).pluck('result_date','result').to_h
  end

app/views/managemants/index.html.erb


<%= column_chart @managemants.chart_date, xtitle: "date", ytitle: "sales (yen)", width: "600px", height: "200px" %>

You can change to various graphs just by changing the column_chart part of the view. ・Line chart-line_chart Screenshot 2020-07-20 21.54.12.png

・Pie chart-pie_chart Screenshots 2020-07-20 22.26.09.png ・Bar graph-pie_chart Screenshots 2020-07-20 22.26.35.png

・Area chart-area_chart  Screenshot 2020-07-20 22.26.58.png

You can easily create beautiful graphs, so please give it a try.

reference

https://chartkick.com/