Como criar gráficos usando Ruby on Rails

Verifique se você tem o Ruby on Rails instalado no seu sistema. Para este tutorial, você também vai precisar adicionar as gems Chartkick e Groupdate ao seu Gemfile.

#Gemfile
gem 'chartkick'
gem 'groupdate'

Depois, execute o comando bundle install para instalar as gems.

bundle install

Se você ainda não tem um projeto Rails, pode criar um com o seguinte comando para o Rails 7:

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

Observação: substitua postgresql por mysql ou sqlite3, de acordo com o banco de dados de sua preferência.

Configurando o Chartkick com Importmap

Em config/importmap.rb, adicione:

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

E em app/javascript/application.js, adicione:

import "chartkick"
import "Chart.bundle"

Para esbuild, Webpacker ou outros bundlers JS, consulte a documentação do Chartkick.

Criando um gráfico com Chartkick e Groupdate

Preparação do model e dos dados:

Suponha que você tenha um model User com um timestamp created_at. Vamos criar um gráfico com o número de usuários criados por dia.

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

User.group_by_day(:created_at).count gera uma consulta SQL simples que conta o número de usuários criados por dia.

Crie a view index:

Na sua view, use o helper line_chart fornecido pelo Chartkick para criar o gráfico:

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

Ao executar o servidor com rails s e acessar a sua página, você deverá ver um gráfico de linhas representando o número de usuários criados a cada dia.

Aprimorando seus gráficos

O Chartkick permite personalizar os gráficos com várias opções, como cores, mensagens e muito mais. Veja um exemplo de personalização do gráfico anterior:

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

Criando diferentes tipos de gráficos

O Chartkick oferece suporte a vários tipos de gráficos. Abaixo estão exemplos de diferentes gráficos que você pode implementar.

Gráfico de pizza

Para criar um gráfico de pizza que mostre a distribuição das funções de usuário na sua aplicação:

Ruby:

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

erb:

<%= pie_chart @user_roles %>

Gráfico de colunas

Para visualizar o número de posts criados pelos usuários a cada mês:

Ruby:

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

erb:

<%= column_chart @posts_by_month %>

Gráfico de área

Para criar um gráfico de área, semelhante ao gráfico de linhas, mas preenchido:

erb:

<%= area_chart @users_by_day %>

Conclusão

Criar gráficos nas suas aplicações Ruby on Rails com o Chartkick permite gerar gráficos dinâmicos de forma rápida e fácil, com apenas algumas linhas de código. Ao integrar esses gráficos à sua aplicação, você oferece visualizações que ajudam a extrair insights dos dados e a melhorar o processo de tomada de decisão dos usuários.

Você também pode gostar destes artigos:

• Como gerar uma migration no Rails
• Como fazer rollback de uma migration no Rails