AN style="FONT-SIZE: 10pt; BACKGROUND: white; COLOR: red; FONT-FAMILY: Verdana; moz-background-clip: -moz-initial; moz-background-origin: -moz-initial; moz-background-inline-policy: -moz-initial">
N-US style="FONT-SIZE: 10pt; COLOR: windowtext; FONT-FAMILY: Verdana"> Verdana">De que se trata o artigo:
O artigo apresenta um conjunto de técnicas para criação de gráficos em sistemas web.
Para que serve:
Para a criação de gráficos em sistemas web utilizando tecnologias como Javacript, Flash e JFreeChart.
Em que situação o tema é útil:
Quando se deseja implementar gráficos em sistemas Web e não se sabe exatamente como fazê-lo ou que tecnologias são mais apropriadas. O artigo apresenta três métodos e suas respectivas vantagens e desvantagens.
Gráficos em Sistemas Web - Resumo Devman:
O artigo apresenta três métodos para criação de gráficos em sistemas web. O primeiro utiliza o Flot, um plugin para a biblioteca Javascript JQuery, que desenha gráficos em um elemento HTML canvas. Este plugin possibilita a criação de gráficos em barras e linhas, além de mecanismos de interação com usuário através de Ajax. O segundo método utiliza a tecnologia Flash e funciona através do uso de uma classe utilitária para definição dos dados e tipos de gráficos a serem renderizados. Por fim, a biblioteca Cewolf, baseada no JFreeChart, é apresentada ao leitor, para a criação de gráficos com a linguagem Java.
A visualização de dados em forma de gráficos é um requisito bastante comum em sistemas de software. Muitas vezes é necessário mostrar listas de valores ou tabelas como gráficos em barras, gráficos em forma de pizza ou gráficos de linha. Em sistemas web, existem diversas formas de criar tais gráficos, e isso pode ser feito utilizando diferentes tecnologias; o que exige do programador saber escolher bem o método a ser utilizado. Neste artigo, ajudaremos o programador nessa escolha, mostrando como criar gráficos com três diferentes tecnologias: Adobe Flash™, JFreeChart e Javascript.
Para a criação dos gráficos que serão mostrados como exemplo, utilizaremos os dados reproduzidos nas Tabelas 1 e 2. A Tabela 1 refere-se à evolução do crescimento da população da cidade de Natal/RN no período 1940 - 2000 e projeção da população em 2005 e 2015.
|
Ano |
Número de Habitantes |
|
1940 |
54836 |
|
1950 |
103215 |
|
1960 |
160253 |
|
1970 |
264379 |
|
1980 |
416898 |
|
1991 |
606556 |
|
2000 |
712317 |
|
2005 |
776200 |
|
2015 |
880500 |
Tabela 1. Evolução da População de Natal/RN (Fonte: SEMPLA, 2003)
Já a Tabela 2 refere-se à evolução do fluxo turístico na grande Natal no período 1999 - 2003. Para esses dados, serão criados gráficos do tipo barras, linhas e pizza.
|
Ano |
Brasileiros |
Estrangeiros |
Total |
|
1999 |
846537 |
70222 |
916759 |
|
2000 |
925065 |
83370 |
1008435 |
|
2001 |
985095 |
104015 |
1089110 |
|
2002 |
882227 |
117467 |
999694 |
|
2003 |
837911 |
168855 |
1006766 |
Tabela 2. Fluxo Turístico na Grande Natal/RN (Fonte: SETUR apud SECTUR, 2003)
A criação de gráficos em aplicações Web com Javascript é feita através da utilização de um elemento HTML denominado Canvas. Este elemento possui a função de delimitar uma região para se desenhar gráficos vetoriais dinamicamente. O acesso à área de desenho (limitada por uma altura e largura) é feito através de um conjunto de funções Javascript. A seguir, apresentaremos a criação de um gráfico no formato pizza, utilizando Canvas e Javascript.
Considere, na Listagem 1, o trecho de código HTML no qual será exibido o gráfico no formato pizza. Observe que nesta listagem simplesmente definimos o elemento
...
