Rails em 8 minutos: Criando gráficos incríveis com ApexCharts

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

 

Criando o projeto

1 – Gere o projeto Rails rodando:

2 – Entre no projeto

3 – Gere o controller Graphics rodando:

 

Preparando os dados de testes

1 – Crie o model User rodando:

2 – Coloque no model User:

3 – Coloque no seeds.rb:

3 – Inclua os dados no banco de dados rodando:

 

Instalando o ApexCharts e o GroupDate

1 – Coloque no seu Gemfile:

2 – Instale rodando:

3 – Inclua no application.js

 

Gráfico: Line

1 – Coloque na view graphics/index.html.erb:

2 – Coloque no método line do controller Graphics:

3 – Suba o servidor:

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:

2 – Suba o servidor:

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:

2 – Suba o servidor:

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:

2 – Suba o servidor:

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/

 



12 formas de vencer o bloqueio criativo e escrever textos memoráveis (e 6 dicas extras)

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!
E
stamos aqui para você 🙂

Bem-vindo à família OneBitCode o/

0 0 votes
Article Rating
janeiro 17, 2020
Subscribe
Notify of
guest
5 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Snoop
Snoop
3 anos atrás

Nenhuma imagem ? =/ Queria ver o resultado final…

charliedeus
3 anos atrás

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!

Fernando
Fernando
6 meses atrás

Como faz para adicionar mais dados dinamicamente no gráfico depois de o gráfico já ter sido criado?

Fernando Bastian
4 meses atrás

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?

Feito com s2 por OneBitCode

5
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: