[For those who create portfolios] How to use chart kick

chartkick is a library that makes it very easy to create graphs. スクリーンショット 2020-07-20 21.54.12.png


Ruby 2.5.3 Ruby on Rails 5.2.4 chartkick 3.3.1


1. Installation


 gem "chartkick"
 $ bundle install
2. Read javascript


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

I'm ready. You may want to shut down the server and start over with rails s.


ID, width, height

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

Axis title

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

Combining these makes it look like this.

スクリーンショット 2020-07-20 21.51.41.png

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


def index
    @managemants = Managemant.all


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


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

You can change it to various graphs just by changing the column_chart part of the view. -Line graph-line_chart スクリーンショット 2020-07-20 21.54.12.png

Pie chart-pie_chart スクリーンショット 2020-07-20 22.26.09.png · Bar chart-pie_chart スクリーンショット 2020-07-20 22.26.35.png

Area chart-area_chart スクリーンショット 2020-07-20 22.26.58.png

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



Recommended Posts

[For those who create portfolios] How to use chart kick
[For those who create portfolios] How to use font-awesome-rails
[For those who create portfolios] How to use binding.pry with Docker
[For those who create portfolios] How to omit character strings
[For those who create portfolios] Search function created with ransack
How to use binding.pry for view files
How to create a Maven repository for 2020
[Ruby] How to use slice for beginners
[For those who create portfolios] Reduce mistakes and make the code easier to read -Rubocop Airbnb-
How to create a database for H2 Database anywhere
How to create pagination for a "kaminari" array
[Rails] How to use Gem'rails-i18n' for Japanese support
How to use nginx-ingress-controller with Docker for Mac
[For super beginners] How to use autofocus: true
How to use Map
How to use rbenv
How to use letter_opener_web
How to use with_option
How to use fields_for
How to use map
How to use collection_select
How to use Twitter4J
How to use active_hash! !!
How to use MapStruct
How to use hidden_field_tag
How to use TreeSet
[How to use label]
How to use identity
How to use hashes
How to create docker-compose
How to use JUnit 5
How to use Dozer.mapper
How to use Gradle
How to use org.immutables
How to use java.util.stream.Collector
How to use VisualVM
How to use Map
[Rails] How to create a signed URL for CloudFront
How to use an array for a TreeMap key
[Spring Boot] How to create a project (for beginners)
How to use Truth (assertion library for Java / Android)
How to use GitHub for super beginners (team development)
For those who want to use MySQL for the database in the environment construction of Rails6 ~.
How to create an application
[Java] How to use Map
How to use Chain API
[Java] How to use Map
How to use Priority Queuing
How to use SAS tokens for Azure Event hubs (Java)
Create an Android app for those who don't want to play music on the speaker
[Must-see for apprentice java engineer] How to use Stream API
How to create a lightweight container image for Java apps
[Rails] How to use enum
VS Code FAQ for those who want to escape Eclipse
How to use java Optional
How to use JUnit (beginner)
How to use @Builder (Lombok)
[Swift] How to use UserDefaults
How to use java class
How to use Swift UIScrollView
How to use Big Decimal