How to Create Charts Using Ruby on Rails

Ensure that you have Ruby on Rails installed on your system. You’ll also need to add the Chartkick and Groupdate gems to your Gemfile for this tutorial.

#Gemfile
gem 'chartkick'
gem 'groupdate'

Then, run the bundle install command to install the gems.

bundle install

If you don’t have a Rails project yet, you can initiate one using the following command for Rails 7:

rails new chart_app -d postgresql (Rails 7 uses Importmap by default)

Note: Replace postgresql with mysql or sqlite3 based on your preferred database.

Configuring Chartkick Using Importmap

In config/importmap.rb, add:

pin "chartkick", to: "chartkick.js"
pin "Chart.bundle", to: "Chart.bundle.js"

And in app/javascript/application.js, add:

import "chartkick"
import "Chart.bundle"

For esbuild, Webpacker or other JS bundler options, please see the Chartkick documentation.

Creating a Chart using Chartkick and Groupdate

Model and Data Preparation:

Assume you have a User model with a created_at timestamp. We will chart the number of users created by day.

class UsersController < ApplicationController
  def index
    @users_by_day = User.group_by_day(:created_at).count
  end
end

User.group_by_day(:created_at).count generates a simple SQL query that counts the number of users created per day.

Create the Index View:

In your view, use the line_chart helper provided by Chartkick to create the chart:

<!-- app/views/users/index.html.erb -->
<h1>Users Registered Over Time</h1>
<%= line_chart @users_by_day %>

When you run your server using rails s and navigate to your page, you should see a line chart representing the number of users created each day.

Enhancing Your Charts

Chartkick allows for customization of charts with various options such as colors, messages, and more. Here’s an example to customize the previous chart:

<%= line_chart @users_by_day, colors: ["#b00"], message: "Loading...", library: { backgroundColor: "transparent" } %>

Creating Different Types of Charts

Chartkick supports various types of charts. Below are examples of different charts you can implement.

Pie Chart

To create a pie chart visualizing the distribution of user roles in your application:

Ruby:

@user_roles = User.group(:role).count

erb:

<%= pie_chart @user_roles %>

Column Chart

To visualize the number of posts created by users each month:

Ruby:

@posts_by_month = Post.group_by_month(:created_at).count

erb:

<%= column_chart @posts_by_month %>

Area Chart

To create an area chart similar to the line chart but filled:

erb:

<%= area_chart @users_by_day %>

Conclusion

Creating charts in your Ruby on Rails applications using Chartkick, allows you to quickly and easily create dynamic charts with just a few lines of code. By integrating these charts into your application, you can provide visualizations to help generate insights into the data and improve the decision-making process for users.

You may also enjoy these articles:

• How to Generate a Rails Migration
• How to Rollback a Rails Migration