Criação de gráficos de barras com Javascript

A partir da importação de uma biblioteca apropriada, podemos realizar gráficos de barras. Veremos a biblioteca importar e como manipular o código para conseguir nosso objetivo.

Vamos apresentar um sistema para realizar gráficos de barras em páginas web, com a ajuda de Javascript. Sem dúvida, qualquer pessoa poderá encontrar várias soluções para este problema, embora nós vamos recomendar uma que de verdade pode simplificar muito nossa vida e que não requer nenhum requisito especial. Simplesmente que o navegador do visitante suporte Javscript.

Os gráficos de barras servem para fazer muitas coisas e é uma das tarefas típicas se que se pode necessitar em um projeto um pouco avançado. Geralmente, se utilizam para mostrar resultados de informes, estatísticas ou temas similares de uma maneira muito visual.

Imagem de um dos gráficos que se podem gerar com este mecanismo.

Com o seguinte exemplo, vamos aprender a fazer gráficos dinamicamente, ou seja, que se constroem com uns dados que podem ser variáveis. Se o gráfico fosse construído sempre com os mesmo dados, poderíamos cria-lo com algum programa como o Excel e logo converte-lo em imagem e apresenta-lo dentro da web. Entretanto, é muito habitual que os dados sejam extraídos de uma fonte como um banco de dados ou algo similar, onde podem variar com o tempo. Neste caso, cada vez que se imprima a página, se deveria acessar ao banco de dados, extrair a informação e gerar o gráfico dinamicamente.

BAR_GRAPH

O sistema que apresentamos aqui se chama BAR_GRAPH e serve para gerar gráficos de barras de diferentes tipos com a ajuda de Javascript. Os gráficos têm um aspecto visual muito adequado e são totalmente personalizáveis, podendo configurar o sistema para que mostre gráficos horizontais, verticais e de progresso. Também inclui a possibilidade de criar etiquetas, legendas, agrupar certos valores, utilizar cores diferentes, etc.

O produto é gratuito para uso pessoal, embora se se utiliza de maneira comercial, o autor solicita que se faça uma doação de 6 euros, através de Paypal.

Para a criação dos gráficos não se necessita de nenhum material, exceto umas bibliotecas Javascript que são as que oferecem todas as funcionalidades de criação de gráficos.

Para incluir a biblioteca em nossas páginas web, basta baixa-las do web site do autor do produto: http://www.gerd-tentler.de/tools/graphs/ e chamá-la através de nossos scripts.

Para incluir uma biblioteca Javascript, o habitual é colocar no cabeçalho da página uma chamada ao arquivo onde está o código. Algo como isto:

<head>
<title>Exemplo de gráficos</title>
<script src="graphs.js" type="text/javascript"></script>
</head>

Observamos que se inclui um arquivo chamado graphs.js que se supõe que estará no mesmo diretório que a página web. Dentro desse arquivo encontraremos a declaração de um objeto que será o encarregado de receber os dados de origem com os quais se deseja construir o gráfico e também de mostrá-lo quando tiver introduzido todos os dados iniciais.

Para criar e mostrar um gráfico, o único que temos que fazer é instanciar o objeto gráfico, inserir os valores iniciais e chamar ao método que faz com que se mostre o gráfico.

Pode-se ver um exemplo a seguir das instruções iniciais de criações do gráfico:

//instanciamos o gráfico
graph = new BAR_GRAPH("hBar");
//inserimos valores
graph.values = "380,150,260,310,430";
//mostramos o gráfico na página
document.write(graph.create());

Pode-se complicar um pouco mais este sistema para incorporar, por exemplo, dois turnos de valores, agrupados em dois grupos.

//instanciamos o gráfico
graph = new BAR_GRAPH("hBar");
//definimos as etiquetas que acompanharão a cada casal de valores
graph.labels = "Jan.,Feb.,Mar.,Apr.,May";
//iniciamos os dados. 1 elemento tem um grupo de dois valores.
graph.values = "380;420, 150;340, 260;120, 310;250, 430;370";
//definimos uma legenda
graph.legend = "2001,2002";
//mostramos o gráfico na página
document.write(graph.create());

Se desejarmos ver muitos mais exemplos de gráficos possíveis seria muito interessante acessarmos à página do produto, onde veremos os tipos de gráficos mais habituais que podem se realizar. http://www.gerd-tentler.de/tools/graphs/