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/
Você é novo por aqui?
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 outras tecnologias como Angular, Ionic, React, desenvolvimento de Chatbots e etc.
Se você deseja aprender mais, de uma forma natural e dentro de uma comunidade ativa, visite nosso Facebook e nosso Twitter, veja os screencasts e talks no Youtube, alguns acontecimentos no Instagram, ouça os Podcasts e faça parte de nossa Newsletter.
Além disso, também estamos com alguns e-Books muito interessantes para quem deseja se aprimorar como programador e também como freelancer (os e-Books são gratuitos!):- WorkFlow Super Full Stack
- Desenvolvendo seus projetos como um profissional
- Guia do Freelancer
- PDF com links fundamentais para quem quer ser um freelancer de sucesso
- Guia One Bit Code de Gems
- Baixe gratuitamente seu e-Book com 60 Gems separadas por categorias
Espero que curta nossos conteúdos e sempre que precisar de ajuda com os tutoriais, fala com a gente! Seja por Facebook ou e-mail, estamos aqui para você 🙂
Bem-vindo à família OneBitCode \o/
3
Deixe um comentário
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!
NOVIDADE!
e-Books
Nenhuma imagem ? =/ Queria ver o resultado final…