Comment créer des graphiques avec Ruby on Rails

Assure-toi que Ruby on Rails est installé sur ton système. Pour ce tutoriel, tu devras aussi ajouter les gems Chartkick et Groupdate à ton Gemfile.

#Gemfile
gem 'chartkick'
gem 'groupdate'

Ensuite, lance la commande bundle install pour installer les gems.

bundle install

Si tu n’as pas encore de projet Rails, tu peux en créer un avec la commande suivante pour Rails 7 :

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

Remarque : remplace postgresql par mysql ou sqlite3 selon ta base de données préférée.

Configurer Chartkick avec Importmap

Dans config/importmap.rb, ajoute :

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

Et dans app/javascript/application.js, ajoute :

import "chartkick"
import "Chart.bundle"

Pour esbuild, Webpacker ou d’autres bundlers JS, consulte la documentation de Chartkick.

Créer un graphique avec Chartkick et Groupdate

Modèle et préparation des données:

Supposons que tu as un modèle User avec un timestamp created_at. Nous allons représenter le nombre d’utilisateurs créés par jour.

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

User.group_by_day(:created_at).count génère une requête SQL simple qui compte le nombre d’utilisateurs créés par jour.

Créer la vue index:

Dans ta vue, utilise le helper line_chart fourni par Chartkick pour créer le graphique :

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

Quand tu lances ton serveur avec rails s et que tu ouvres ta page, tu devrais voir une courbe représentant le nombre d’utilisateurs créés chaque jour.

Améliorer tes graphiques

Chartkick permet de personnaliser les graphiques avec diverses options comme les couleurs, les messages, etc. Voici un exemple pour personnaliser le graphique précédent :

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

Créer différents types de graphiques

Chartkick prend en charge plusieurs types de graphiques. Voici des exemples de graphiques que tu peux mettre en place.

Graphique en secteurs

Pour créer un graphique en secteurs montrant la répartition des rôles utilisateurs dans ton application :

Ruby:

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

erb:

<%= pie_chart @user_roles %>

Histogramme

Pour visualiser le nombre de posts créés par les utilisateurs chaque mois :

Ruby:

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

erb:

<%= column_chart @posts_by_month %>

Graphique en aires

Pour créer un graphique en aires, semblable à la courbe mais rempli :

erb:

<%= area_chart @users_by_day %>

Conclusion

Avec Chartkick, créer des graphiques dans tes applications Ruby on Rails est rapide et simple : quelques lignes de code suffisent pour obtenir des graphiques dynamiques. En les intégrant à ton application, tu offres des visualisations qui aident à tirer des enseignements des données et à améliorer la prise de décision des utilisateurs.

Ces articles pourraient aussi te plaire :

• Comment générer une migration Rails
• Comment annuler une migration Rails