[IONIC] – Gráficos com Angular2 Charts

Olá galera, tranquilo?

Fiquei um pouco sumido com tutoriais pois, estou um pouco atarefado e agora estou também gravando uma série de vídeos no Youtube, caso queiram, podem conferir AQUI o canal. Ensino do básico até a publicar um app Ionic nas lojas Android e Apple, ok? É novo ainda, e tem apenas 5 vídeos publicados, mas semanalmente lanço 2 vídeos, vale a pena ficar de olho, pois vai ter muita coisa bacana com Ionic.

Bom, a dica de hoje é realmente muito BACANA. Muitas aplicações exigem demonstração de números em gráficos, então vou ensinar o uso com Angular2 Charts, além de deixar o app estiloso, fica bem bonito e interativo para o usuário, vamos la?

1. Criar o projeto Ionic

Vamos começar gerando um novo aplicativo Ionic em branco, para fazer isso, apenas execute o seguinte comando:

Uma vez criado, vamos entrar no diretório do Projeto, executando:

2. Instalando Ng2-Charts

Para utilizar essa incrível biblioteca, devemos instalar as dependências do Ng2-Charts, para isso vamos executar:

Agora, devemos também instalar as bibliotecas do chart.js:

OBS: É importante alterar o arquivo src/index.html e adicionar:

3. Importar a biblioteca

Tudo instalado, agora vamos importar a biblioteca para o nosso projeto e usar na aplicação inteira, então iremos alterar o arquivo

Para isso, vamos alterar o arquivo src/app/app.module.ts

4. Gerando os dados

Pronto, agora já podemos utilizar o ng-Charts, então vamos gerar alguns dados fictícios, a fim de mostrar como funciona e vermos em tela o resultado, o arquivo src/pages/home/home.ts deverá ser alterado:

Aqui nós criamos algumas variáveis pré-definidas.
Um método calc(tipo), onde o tipo é o valor do segment que iremos criar para mostrar o chart do tipo Bar ou do tipo Doughnut.
E criamos 1 método para gerar cada chart (calcBar ou calcDoughnut).
Como os nossos dados são estáticos, apenas de exemplo, ficou bem simples de se fazer.
Quando implementado buscando dados externos, seja de um ws, de uma api, de um banco de dados, poderá ficar um pouco mais complexo, mas a partir deste exemplo, creio que dê para ter noção de como utilizar.

5. Mostrando os gráficos

Agora que já temos os dados, vamos mostrar os gráficos na tela, para isso, devemos alterar o arquivo src/pages/home/home.html:

Primeiro nós criamos um segment com 2 valores (Bar e Doughnut). E determinamos o método (ionChange)=”calc(segment)” para calcular o gráfico sempre que alterarmos o segment de acordo com o tipo passado.

Dentro de cada segment, obviamente iremos mostrar os gráficos de acordo com a opção escolhida.

6. Executando o projeto

Pronto!!

Vamos ver o resultado, então digite o comando

ou

ou

e deveremos ter algo semelhante à isso:

Espero que tenham gostado e que possam utilizar daqui pra frente nos projetos de vocês essa dica bem bacana.

Caso tenham gostado, compartilhe com os amigos, e se houver dúvidas podem comentar, que o mais breve possível eu respondo!!

O Código fonte para tudo isso que fizemos, encontra-se aqui.

Valeu, até mais!