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/

julho 19, 2019

3
Deixe um comentário

avatar
2 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
charliedeusLeonardo ScorzaSnoop Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Snoop
Visitante
Snoop

Nenhuma imagem ? =/ Queria ver o resultado final…

charliedeus
Membro
charliedeus

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
%d blogueiros gostam disto: