[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 use an array for HashMap keys
How to create pagination for a "kaminari" array
[For super beginners] How to use autofocus: true
How to use Map
How to use rbenv
How to use with_option
How to use fields_for
How to use java.util.logging
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 TreeSet
[How to use label]
How to use identity
How to use hashes
How to create docker-compose
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
How to use an array for a TreeMap key
How to use Truth (assertion library for Java / Android)
How to use GitHub for super beginners (team development)
How to use Chain API
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
VS Code FAQ for those who want to escape Eclipse
How to use java Optional
How to use JUnit (beginner)
How to use Ruby return
How to create a placeholder part to use in the IN clause
How to use @Builder (Lombok)
How to use java class
How to use Big Decimal
[Java] How to use removeAll ()
How to use String [] args
How to use Font Awesome icon for ul and li
How to use rails join
How to use Java Map
How to use Mali Graphics Debugger to debug apps for Android (even those made with + Unity)
Ruby: How to use cookies
How to use dependent :: destroy
How to use Eclipse Debug_Shell
How to use Apache POI
[Rails] How to use validation
How to use Java variables