Gráficos são fundamentais para apresentar informações de forma rápida, implementá-los no seus projetos Ruby On Rails pode consumir um tempo considerável se você não usar uma biblioteca consistente, então vamos aprender como criar gráficos realmente bonitos facilmente neste artigo.
Ferramentas utilizadas
- Ruby
- Ruby On Rails
- ApexCharts
- GroupDate
Criando o projeto
1 – Gere o projeto Rails rodando:
|
1 |
rails new incredible_graphics |
2 – Entre no projeto
|
1 |
cd incredible_graphics |
3 – Gere o controller Graphics rodando:
|
1 |
rails g controller Graphics index |
Preparando os dados de testes
1 – Crie o model User rodando:
|
1 |
rails g model User birthday:date gender:integer |
2 – Coloque no model User:
|
1 2 3 |
class User < ApplicationRecord enum gender: %i[male female] end |
3 – Coloque no seeds.rb:
|
1 2 3 4 5 6 7 8 |
dates_list = [] 10.times do dates_list << Time.now - rand(1..365).day end 100.times do User.create(birthday: dates_list.sample, gender: %i[male female].sample) end |
3 – Inclua os dados no banco de dados rodando:
|
1 |
rails db:create db:migrate db:seed |
Instalando o ApexCharts e o GroupDate
1 – Coloque no seu Gemfile:
|
1 2 |
gem 'apexcharts' gem 'groupdate' |
2 – Instale rodando:
|
1 |
bundle install |
3 – Inclua no application.js
|
1 |
//= require 'apexcharts' |
Gráfico: Line
1 – Coloque na view graphics/index.html.erb:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<h1>Graphics</h1> <% series = [ {name: "Male", data: @male_user}, {name: "Female", data: @female_user} ] %> <% options = { title: 'Users Growth', subtitle: 'Grouped Per Week', xtitle: 'Week', ytitle: 'Users', stacked: true } %> <%= line_chart(series, options) %> |
2 – Coloque no método line do controller Graphics:
|
1 2 3 4 |
def index @male_user = User.where(gender: :male).group_by_week(:birthday).count @female_user = User.where(gender: :female).group_by_week(:birthday).count end |
3 – Suba o servidor:
|
1 |
rails s |
4 – Veja o resultado em localhost:3000/graphics/index
Gráfico: Área
1 – Substitua o método de exibição do gráfico da view graphics/index.html.erb colocando:
|
1 |
<%= area_chart(series, {**options, theme: 'palette5'}) %> |
2 – Suba o servidor:
|
1 |
rails s |
3 – Veja o resultado em localhost:3000/graphics/index
Gráfico: Mixed
1 – Substitua o método de exibição do gráfico da view graphics/index.html.erb colocando:
|
1 2 3 4 |
<%= combo_charts({**options, theme: 'palette1', stacked: false, data_labels: false}) do %> <% column_chart(series.first) %> <% area_chart(series.last) %> <% end %> |
2 – Suba o servidor:
|
1 |
rails s |
3 – Veja o resultado em localhost:3000/graphics/index
Gráfico: Annotations
1 – Substitua o método de exibição do gráfico da view graphics/index.html.erb colocando:
|
1 2 3 4 5 |
<%= area_chart(series, {**options, theme: 'palette1'}) do %> <% x_annotation(value: ('2019-01-26'..'2019-02-17'), text: "Bug in Registration", color: 'red') %> <% y_annotation(value: 33, text: "Max Registers", color: 'blue') %> <% point_annotation(value: ['2018-08-19', 26], text: "Marketing campaign", color: 'magenta') %> <% end %> |
2 – Suba o servidor:
|
1 |
rails s |
3 – Veja o resultado em localhost:3000/graphics/index
Conclusão
Curtiu esses lindos gráficos? Agora você já sabe como utilizá-los facilmente no seus projeto Ruby On Rails. Se quiser conhecer mais sobre a gem Apex Charts basta clicar aqui, na página do Github você também vai encontrar mais gráficos incríveis.
Se você curtiu este tutorial deixa um comentário e envia para seus amigos, tenho certeza que eles vão curtir aprender a usar esses lindos gráficos 🙂
Obrigado por estar com a gente, Grande abraço o/
Não perca nenhum conteúdo
Receba nosso resumo semanal com os novos posts, cursos, talks e vagas o/
Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!
O OneBitCode traz conteúdos de qualidade, e em português, sobre programação com foco em Ruby on Rails e também JavaScript.
Além disso, aqui sempre levamos à você conteúdos valiosos sobre a carreira de programação, dicas sobre currículos, portfólios, perfil profissional, soft skills, enfim, tudo o que você precisa saber para continuar evoluindo como Programador(a)!
Fique por dentro de todos os conteúdos o/
Nossas redes sociais:
📹 • https://youtube.com/Onebitcode [Live todas as terças-feiras às 19h)
💻 • celebrities online dating
🙂 • https://onebitcode.com/top-african-american-online-dating-sites/
📱 • dating sites for crossdressers
🐦 • https://twitter.com/onebitcode
Nossos cursos:
🥇 • Programador Full Stack Javascript em 8 Semanas
💎 • Curso Completo de Ruby
⚙ • Minicurso: API Rails 5 Completo
🐞 • Minicurso de Testes para Ruby on Rails com RSpec
Espero que curta nossos conteúdos e sempre que precisar de ajuda, fala com a gente!
Estamos aqui para você 🙂
Bem-vindo à família OneBitCode o/
Nenhuma imagem ? =/ Queria ver o resultado final…
Opa, tudo bem?
Vale a pena dar uma olhada no vídeo, lá tem todos os gráficos 🙂
Massa, Léo…
Um presente essa GEM. Durante muito tempo tive tive dificuldades em implementar (e manter) os gráficos em JS…
Esse GEM pode ajudar muitos iniciantes…
Grande abraço!
Como faz para adicionar mais dados dinamicamente no gráfico depois de o gráfico já ter sido criado?
Como faz para adicionar mais dados dinamicamente no gráfico depois de o gráfico já ter sido criado? E teria algum exemplo para fazer um gráfico em tempo real com essa biblioteca ApexCharts?