Cómo crear gráficas con Ruby on Rails

Asegúrate de tener Ruby on Rails instalado en tu sistema. Para este tutorial también necesitarás agregar las gemas Chartkick y Groupdate a tu Gemfile.

#Gemfile
gem 'chartkick'
gem 'groupdate'

Luego, ejecuta el comando bundle install para instalar las gemas.

bundle install

Si todavía no tienes un proyecto de Rails, puedes crear uno con el siguiente comando para Rails 7:

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

Nota: reemplaza postgresql por mysql o sqlite3 según la base de datos que prefieras.

Cómo configurar Chartkick con Importmap

En config/importmap.rb, agrega:

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

Y en app/javascript/application.js, agrega:

import "chartkick"
import "Chart.bundle"

Para esbuild, Webpacker u otros bundlers de JS, consulta la documentación de Chartkick.

Cómo crear una gráfica con Chartkick y Groupdate

Preparación del modelo y los datos:

Supongamos que tienes un modelo User con un timestamp created_at. Vamos a graficar el número de usuarios creados por día.

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

User.group_by_day(:created_at).count genera una consulta SQL sencilla que cuenta el número de usuarios creados por día.

Crea la vista index:

En tu vista, usa el helper line_chart que ofrece Chartkick para crear la gráfica:

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

Cuando ejecutes tu servidor con rails s y abras tu página, deberías ver una gráfica de líneas con el número de usuarios creados cada día.

Mejora tus gráficas

Chartkick te permite personalizar las gráficas con varias opciones, como colores, mensajes y más. Este es un ejemplo para personalizar la gráfica anterior:

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

Cómo crear distintos tipos de gráficas

Chartkick admite varios tipos de gráficas. A continuación tienes ejemplos de distintas gráficas que puedes implementar.

Gráfica de pastel

Para crear una gráfica de pastel que muestre la distribución de roles de usuario en tu aplicación:

Ruby:

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

erb:

<%= pie_chart @user_roles %>

Gráfica de columnas

Para visualizar el número de posts creados por los usuarios cada mes:

Ruby:

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

erb:

<%= column_chart @posts_by_month %>

Gráfica de área

Para crear una gráfica de área, parecida a la de líneas pero rellena:

erb:

<%= area_chart @users_by_day %>

Conclusión

Crear gráficas en tus aplicaciones de Ruby on Rails con Chartkick te permite generar gráficas dinámicas de forma rápida y sencilla con solo unas cuantas líneas de código. Al integrar estas gráficas en tu aplicación, puedes ofrecer visualizaciones que ayuden a obtener información valiosa de los datos y a mejorar la toma de decisiones de los usuarios.

También te pueden interesar estos artículos:

• Cómo generar una migración de Rails
• Cómo revertir una migración de Rails