[Rails] How to create a graph using lazy_high_charts

Target

** Create a graph that shows the monthly registration transition of books on a daily basis. ** ** ezgif.com-video-to-gif.gif

Development environment

・ Ruby: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ OS: macOS Catalina

Premise

The following has been implemented.

Slim introductionIntroduction of Bootstrap3Introduction of Font Awesome -Login function implementationImplementation of posting function

Implementation

1. Introduce Gem

Gemfile


#Postscript
gem 'lazy_high_charts'

Terminal


$ bundle

2. Edit ʻapplication.js`

application.js


//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require highcharts/highcharts //Postscript
//= require highcharts/highcharts-more //Postscript
//= require_tree .

3. Edit controller

books_controller.rb


def index
  @book = Book.new
  @books = Book.all
  #Postscript
  days = (Date.today.beginning_of_month..Date.today).to_a
  books = days.map { |item| Book.where(created_at: item.beginning_of_day..item.end_of_day).count }
  @graph = LazyHighCharts::HighChart.new('graph') do |f|
    f.title(text: 'Monthly registration transition')
    f.xAxis(categories: days)
    f.series(name: 'Registration number', data: books)
  end
end

(1) Get the date from the 1st of this month to today and assign it to the variable.

days = (Date.today.beginning_of_month..Date.today).to_a

(2) Acquire the number of books created within the date acquired in and assign them to variables.

books = days.map { |item| Book.where(created_at: item.beginning_of_day..item.end_of_day).count }

③ Create a graph

@graph = LazyHighCharts::HighChart.new('graph') do |f|
  f.title(text: 'Monthly registration transition') #title
  f.xAxis(categories: days) #Horizontal axis
  f.series(name: 'Registration number', data: books) #Vertical axis
end

4. Edit the view

slim:books/index.html.slim


/Postscript
= high_chart('sample', @graph)

Recommended Posts

[Rails] How to create a graph using lazy_high_charts
[rails] How to create a partial template
[Rails 6] How to create a dynamic form input screen using cocoon
How to easily create a pull-down in Rails
[Rails] How to create a Twitter share button
How to create a method
How to create a query using variables in GraphQL [Using Ruby on Rails]
[Rails] How to create a signed URL for CloudFront
[Rails] How to install a decorator using gem draper
Preparing to create a Rails application
[Java] How to create a folder
How to display a graph in Ruby on Rails (LazyHighChart)
How to execute a contract using web3j
How to sort a List using Comparator
[Rails] How to upload images using Carrierwave
How to insert a video in Rails
How to create a Maven repository for 2020
[Swift5] How to create a splash screen
How to implement image posting using rails
[Rails] How to handle data using enum
How to create a jar file or war file using the jar command
Rails: How to write a rake task nicely
[Rails] How to write when making a subquery
How to write Rails
[Rails] rails new to create a database with PostgreSQL
How to build a Ruby on Rails environment using Docker (for Docker beginners)
How to delete a controller etc. using a command
[Ethereum] How to execute a contract using web3j-Part 2-
How to create pagination for a "kaminari" array
How to create a class that inherits class information
How to create a theme in Liferay 7 / DXP
How to uninstall Rails
[Docker] How to create a virtual environment for Rails and Nuxt.js apps
[Rails] How to upload multiple images using Carrierwave
[1st] How to create a Spring-MVC framework project
How to implement a like feature in Rails
How to create docker-compose
How to generate a primary key using @GeneratedValue
Rails6.0 ~ How to create an eco-friendly development environment
How to create hierarchical category data using ancestry
[Rails] How to create a table, add a column, and change the column type
How to make a follow function in Rails
A memo to simply create a form using only HTML and CSS in Rails 6
How to create an Excel form using a template file with Spring MVC
[Introduction] Try to create a Ruby on Rails application
How to create a Java environment in just 3 seconds
How to implement a like feature in Ajax in Rails
How to delete a new_record object built with Rails
How to create a JDBC URL (Oracle Database, Thin)
How to create a Spring Boot project in IntelliJ
[Spring Boot] How to create a project (for beginners)
How to manually generate a JWT with Rails Knock
A memorandum when trying to create a GUI using JavaFX
How to delete custom Adapter elements using a custom model
How to create a data URI (base64) in Java
[How to insert a video in haml with Rails]
How to write a date comparison search in Rails
How to convert A to a and a to A using AND and OR in Java
[Rails 6] How to set a background image in Rails [CSS]
[Rails] Create sitemap using sitemap_generator and deploy to GAE
Rails learning How to implement search function using ActiveModel