Come creare grafici con Ruby on Rails

Assicurati di avere Ruby on Rails installato sul tuo sistema. Per questo tutorial dovrai anche aggiungere le gem Chartkick e Groupdate al tuo Gemfile.

#Gemfile
gem 'chartkick'
gem 'groupdate'

Poi esegui il comando bundle install per installare le gem.

bundle install

Se non hai ancora un progetto Rails, puoi crearne uno con il seguente comando per Rails 7:

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

Nota: sostituisci postgresql con mysql o sqlite3 in base al database che preferisci.

Configurare Chartkick con Importmap

In config/importmap.rb, aggiungi:

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

E in app/javascript/application.js, aggiungi:

import "chartkick"
import "Chart.bundle"

Per esbuild, Webpacker o altri bundler JS, consulta la documentazione di Chartkick.

Creare un grafico con Chartkick e Groupdate

Preparazione del modello e dei dati:

Supponiamo che tu abbia un modello User con un timestamp created_at. Creeremo un grafico del numero di utenti creati ogni giorno.

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 semplice query SQL che conta il numero di utenti creati al giorno.

Creare la vista Index:

Nella tua vista, usa l'helper line_chart fornito da Chartkick per creare il grafico:

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

Quando avvii il server con rails s e apri la pagina, dovresti vedere un grafico a linee che mostra il numero di utenti creati ogni giorno.

Migliorare i tuoi grafici

Chartkick permette di personalizzare i grafici con varie opzioni, come colori, messaggi e altro. Ecco un esempio per personalizzare il grafico precedente:

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

Creare diversi tipi di grafici

Chartkick supporta vari tipi di grafici. Qui sotto trovi esempi di grafici diversi che puoi implementare.

Grafico a torta

Per creare un grafico a torta che mostri la distribuzione dei ruoli utente nella tua applicazione:

Ruby:

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

erb:

<%= pie_chart @user_roles %>

Grafico a colonne

Per visualizzare il numero di post creati dagli utenti ogni mese:

Ruby:

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

erb:

<%= column_chart @posts_by_month %>

Grafico ad area

Per creare un grafico ad area, simile al grafico a linee ma riempito:

erb:

<%= area_chart @users_by_day %>

Conclusione

Creare grafici nelle tue applicazioni Ruby on Rails con Chartkick ti permette di realizzare grafici dinamici in modo semplice e veloce, con poche righe di codice. Integrando questi grafici nella tua applicazione, puoi offrire visualizzazioni che aiutano a ricavare informazioni utili dai dati e a migliorare il processo decisionale degli utenti.

Potrebbero interessarti anche questi articoli:

• Come generare una migration in Rails
• Come fare il rollback di una migration in Rails