Esse artigo faz parte da revista Java Magazine edição 61. Clique aqui para ler todos os artigos desta edição

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)

Gráficos em Javascript

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

...

Quer ler esse conteúdo completo? Seja um assinante e descubra as vantagens.
  • 473 Cursos
  • 10K Artigos
  • 100 DevCasts
  • 30 Projetos
  • 80 Guias
Tenha acesso completo