Introduced graph function with rails

Introduction

I was developing an app that records learning this time, and I want to graph the learning situation! I thought it was relatively easy to implement, so I will leave it as a memorandum. The author will implement it using rails6. Since it is a beginner, I would appreciate it if you could point out any mistakes!

Step 1 Introduce gem chart kick

To easily implement the graph function, use gem's chartkick. Add the following to the gem file and bundle install. groupdate is introduced because there is a convenient method that can group and retrieve various information from DB, but if you only use chartkick, gem "chartkick" is fine.

gem "chartkick"
gem "groupdate"

For rails6, execute the following command

yarn add chartkick chart.js

Step 2 Read js file

In chartkick, js file is described in app/javascript/packs/application.js for implementation using js. For rails6

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

For rails5

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

Step 3 Insert the graph in html

If you go so far, you can easily create a graph just by writing the sample code on the official page in html. In my case I used it like this. <%= column_chart @tweets.group_by_day_of_week(:created_at, format: "%a").count %> https://gyazo.com/4c24263ba93c7e3bc2ea6974bfb0143f Here group_by_day_of_week is a method that can be used if the gem groupdate is installed. I used a bar graph this time, but you can easily implement line graphs and pie charts, so please take a look at chartkick's official website! !!

Recommended Posts

Introduced graph function with rails
Login function implementation with rails
[Ruby on Rails] Introduced paging function
Implemented mail sending function with rails
Create pagination function with Rails Kaminari
Rails6 jQuery introduced
Rails Bootstrap introduced
[Rails 6] Ranking function
[Rails withdrawal] Create a simple withdrawal function with rails
[Rails] Category function
[Rails 6] Interactive graph drawing with Ajax + chart.js
Make a login function with Rails anyway
Rails follow function
Introduced Rails6 toastr
[Rails] Notification function
Let's make a search function with Rails (ransack)
Output simple graph with Rails Use gem-chartkick / groupdate
Create an EC site with Rails 5 ⑩ ~ Create an order function ~
Rails deploy with Docker
[Rails 6] RuntimeError with $ rails s
[Rails] Implement search function
[Rails] Implemented hashtag function
Handle devise with Rails
[rails] tag ranking function
Graph creation with JFreeChart
[Rails] Learning with Rails tutorial
[Rails] Test with RSpec
Rails search function implementation
[Rails] Development with MySQL
Supports multilingualization with Rails!
Double polymorphic with Rails
With Kotorin ―― 7. Scoping Function
Serverless Function with Micronaut
[Rails] Implementation of drag and drop function (with effect)
Create an EC site with Rails 5 ⑨ ~ Create a cart function ~
[Rails] Introduced debugging gems'better_errors' and'binding_of_caller'
Implement application function in Rails
Search function using [rails] ransack
[Rails] Express polymorphic with graphql-ruby
Java to play with Function
[Rails] Upload videos with Rails (ActiveStorage)
Try using view_component with rails
Implement follow function in Rails
[Vue Rails] "Hello Vue!" Displayed with Vue + Rails
Japaneseize using i18n with Rails
[Rails] Create an email sending function with ActionMailer (complete version)
[Rails 6] Implementation of search function
API creation with Rails + GraphQL
Preparation for developing with Rails
[Rails] Implementation of category function
Run Rails whenever with docker
Rails ~ Understanding the message function ~
Login function with Spring Security
[Ruby on Rails] Implement login function by add_token_to_users with API
[Docker] Rails 5.2 environment construction with docker
Use multiple databases with Rails 6.0
[Rails] Specify format with link_to
[Rails] (Supplement) Implemented follow function
[Rails] EC site cart function
Ajax bookmark function using Rails
[Rails] Implementation of tutorial function