Framework

12 jul, 2018

Gráficos com Angular2 Charts e Ionic

Publicidade

Geralmente, o que os usuários exigem de aplicativos são basicamente três coisas:

  • Design bonito
  • Animações suaves
  • Ótimo desempenho

Pensando dessa forma, uma boa alternativa seria a utilização de gráficos para enriquecer e embelezar a aplicação.
Existe um framework com uma curva de desenvolvimento muito rápida e que com a nova versão lançada, está bem estável e com boa performance. Ainda é a base de TypeScript (o TypeScript possibilita que você escreva código JavaScript na forma que foi acostumado quando aprendeu Orientação a Objetos), então possui fácil integração de bibliotecas de JavasScript; eu falo do Ionic Framework.

Com essa facilidade de integração com bibliotecas JS usando o Framework Ionic, podemos elaborar um aplicativo que demonstre belos gráficos ao nosso usuário final, com uma performance muito boa e deixando o aplicativo mais elegante também.

A biblioteca em questão é a Angular2 Charts.

De fácil instalação e implementação, o resultado final são belos gráficos (diversos tipos) e interação com o usuário (vocês verão ao final deste artigo), onde o usuário poderá clicar e manipular a visualização dos dados dos gráficos com uma leve e suave animação.

Então mão na massa e vamos colocá-lo em prática.

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 instalar as bibliotecas do chart.js:

Observação: É 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 um 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 dois 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. Digite o comando:

Ou:

Ou:

E teremos algo semelhante à isso:

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

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

Obrigado!