Chartist.js – criando gráficos responsivos com o chartist.js

Outro dia, pesquisando outras bibliotecas para criar gráficos responsivos com HTML5 e javascript, acabei encontrando esta chamada Chartist.js. Inicialmente eu confundi essa biblioteca com a Chart.JS, achava que era uma espécie de major update, mas depois percebi que era uma solução a parte, mas que também fica nem um pouco para trás em termos de funcionalidades modernas e simplicidade. Acabei criando esse post com base nos testes que fiz na ferramenta então sintam-se livres para encaminhar duvidas e testar o demo que está disponibilizado no artigo.

Bom, esse é o primeiro post de 2015 no blog, então um ótimo ano para todos.

Como de costume nos posts do blog, eu sempre crio um demo para tentarexplicar como eu entendi e aprendi a utilizar tal ferramenta. Com essa não vai ser diferente, então segue o link para baixar o demo e o repositório do GitHub.

Introdução ao Chartist.js

O Chartist.js é mais uma solução disponível para facilitar a forma com que trabalhamos com gráficos para web, utilizando HTML5 e JavaScript.

O diferencial do Chartist.js e o motivo que me fez testar a solução foi a questão estética que chama muito a atenção, com um design flat muito bem elaborado, e a simplicidade na utilização da solução, seguindo a documentação (que é tão simples e direta que chega a ser bem curta).

Além disso, os gráficos são renderizados com SVG inline, o que significa que você tem maior controle do gráfico pois as tags SVG que compõem o gráfico estão no DOM. Você pode testar essa funcionalidade visualizando a página do Chartist.js através da ferramenta para desenvolvedores do seu navegador.

Para maiores informações a respeito do Chartist.js, acesse a documentação oficial.

Como utilizar

Bom, como já citei antes, a utilização é muito simples. Primeiro precisamos adicionas os links para os arquivos que presentes nos repositórios, dentro da tag head. No demo ficou algo como:

1
2
<link rel=“stylesheet” href=“//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css”>
<script src=“//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js”></script>

Note que no demo eu utilizei links CDN para os arquivos da biblioteca. Se você quiser testar localmente baixe o repositório do GitHub e substitua os caminhos de apontamento para os arquivos locais, os repositórios CDN precisam de acesso a internet para carregar as funcionalidades da solução.

Após isso podemos declarar as funções para chamar o primeiro gráfico. Antes de criar um gráfico, temos que entender a metodologia de design utilizada pelo Chartist.js para abordar a reponsividade dos gráficos.

Ao invés de utilizar tamanhos fixos para a box (320×320, por exemplo), são utilizadas medidas de proporção, como 4:3, 3:2, 16:9 (famoso widescreen). Com essa técnica fica mais fácil garantir a reponsividade do gráfico em qualquer tamanho de tela.

Com isso em mente, criamos uma box onde o gráfico deve ser renderizado, conforme o exemplo abaixo:

1
<div class=“ct-chart ct-square”></div>

Utilizei a proporção ct-square, que medindo em proporção da um quadrado. Existem diversas medidas na documentação, além dessa do exemplo eu também testei a .ct-perfect-fourth que seria 4:3, e a .ct-golden-ratio.

Se você utilizar uma box com medidas fixas você não precisa declarar uma classe para proporção, basta declarar a função que de fato vai criar o gráfico na box que criamos acima. Utilizamos o seguinte código para criar o gráfico:

1
2
3
4
5
6
7
8
9
window.onload = function() {
var data = {
labels: [‘segunda’, ‘terça’, ‘quarta’, ‘quinta’, ‘sexta’],
series: [
[10, 24, 51, 3, 12]
]
};
new Chartist.Line(‘.ct-chart’, data);
};

Feito isso, e se estiver seguindo o demo, ao carregar a página deve ser apresentado um gráfico similar ao da imagem abaixo.

chartist_js_Nilton_Felipe

Se você criou o gráfico sem uma proporção, você pode utilizar as opções da API para declarar as medidas fixas. Primeiro adicionamos uma variável com as informações de medidas:

1
2
3
4
var options = {
width: 300,
height: 200
};

E depois criamos o objeto com referência a variável:

1
new Chartist.Line(‘.ct-chart’, data, options);

Na documentação oficial, na parte de informações sobre a API você tem todas as informações sobre as opções disponíveis para customização do gráfico. Com o Chartist.js você consegue customizar praticamente qualquer gráfico que você criar, ainda mais utilizando SVG inline para renderizar os gráficos.

Além deste exemplo, no demo que eu criei tem mais três testes, apresentando quatro gráficos em uma mesma página, com diferentes valores e estilos.

As opções de customização do Chartist.js vão ainda muito além, você pode animar a visualização do gráfico, criar sinalizadores para pontos cruciais, tudo isso com recursos disponíveis na própria biblioteca da solução que é toda baseada em JavaScript, mais alguns plugins disponíveis para funções especificas.

Não vou muito a fundo na ferramenta porque a intenção era apenas uma introdução, mas se você conseguiu entender como funciona a biblioteca até aqui, acredite, não vai ter problemas para criar exemplos mais avançados como estes exemplos da documentação, e este exemplo abaixo (visualize no Chrome para um resultado satisfatório).

Fonte: http://websocialdev.com/chartist-js-criando-graficos-responsivos-com-o-chartist-js/

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s