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/




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!):

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/

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

Nenhuma imagem ? =/ Queria ver o resultado final…

charliedeus
11 meses 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!

Feito com s2 por OneBitCode
3
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: