P>

capa_NET40_G.gif

Clique aqui para ler todos os artigos desta edição

Mão na Massa

Gráfico de Barras em 3D com ASP.NET

 

Este artigo discute

Este artigo usa as seguintes tecnologias

·       Representação gráfica de valores;

·       Graphical Development Interface (GDI);

·       Response.OutputStream;

Visual Studio 2005, ASP.NET 2.0 e Visual Basic .NET

 

“Uma imagem vale mais do que mil palavras”. Apesar de um pouco desgastada, essa é uma verdade incontestável. Uma simples imagem é capaz de aumentar significativamente a compreensão dos conceitos que se desejam transmitir em uma mensagem. O poder de uma mensagem visual não pode ser subestimado, apesar de, em decorrência dos interesses do comunicador, uma imagem também pode ser utilizada para distorcer fatos, criando uma verdadeira “ilusão de ótica”.

Quando analisamos séries de valores qualitativos ou quantitativos, as disciplinas estatísticas ensinam que os gráficos, com seus formatos variados, são os melhores instrumentos de representação analítica. Gráficos de barras verticais, barras horizontais, de pizza, setorial e de setas são apenas alguns dos muitos exemplos de formatos, com aplicabilidade quase que específica.

Os gráficos de pizza, por exemplo, são mais efetivos na representação de distribuições, enquanto que os gráficos de barras são mais utilizados para representar análises comparativas de valores relacionados a séries históricas ou temporais.

Muitos sistemas de computador precisam (ou deveriam) fazer uso de representações gráficas para uma melhor apresentação de dados analíticos. Alguns gráficos são estáticos ou possuem uma dinâmica de atualização muito pequena, o que permite a composição do gráfico em ferramentas off-line e a respectiva publicação do gráfico através de um arquivo de imagem não dinâmico.

Por outro lado, muitas outras aplicações exigem que os gráficos sejam compostos a partir de valores extraídos de consultas de bancos de dados, combinadas com dados selecionados pelo usuário, tudo em tempo de execução. Nesse caso, precisamos de uma ferramenta que permita a composição dinâmica do gráfico.

Poderíamos relacionar milhares de exemplos de aplicações com esse tipo de requisito. A Tabela 1 lista algumas das aplicações mais comuns de gráficos dinâmicos, relacionando-os a uma sugestão de tipo de gráfico mais adequado.

 

Exemplo de Aplicação

Tipo do Gráfico

Quantidades de acessos ao site por data

Linhas

Faturamento total por loja

Barras Verticais

Valor total de despesas por tipo de despesa

Pizza

Saldo diário total da conta bancária

Barras Verticais

Quantidades de horas trabalhadas por funcionário/projeto

Barras Horizontais

Tabela 1. Exemplo de aplicabilidade de gráficos estatísticos

Nesse artigo discutiremos a criação de um componente Web para a montagem dinâmica de um gráfico de barras verticais em três dimensões, visualmente similar aos gráficos gerados pelos conhecidos softwares de planilha eletrônica do mercado. A Figura 1 apresenta um exemplo de gráfico de barras criado pelo componente que construiremos.

 

image002.gif

Figura 1. Modelo de gráfico de barras verticais

Esse componente como sempre, deverá ser flexível o suficiente para garantir a reutilização em outros projetos que requeiram tal funcionalidade. O componente receberá os dados necessários para a composição do gráfico e retornará a imagem gerada a partir das especificações recebidas.

Para garantir o maior grau de reutilização possível, o componente receberá não somente as séries de valores a serem graficamente representadas, mas também muitos outros atributos (parâmetros) referentes à formatação e apresentação do gráfico.

A Tabela 2 apresenta a relação dos parâmetros de configuração do gráfico, agrupados por tipo do parâmetro, com uma breve descrição de cada parâmetro.

 

Atributo

Descrição

Área de Plotagem

Espaço total do gráfico, correspondente à figura como um todo.

   Altura

Altura total da figura em pixels.

   Largura

Largura total da figura em pixels.

   Cor de Fundo

Cor de fundo da área do gráfico.

Título do Gráfico

Primeira linha do gráfico com o texto de identificação do gráfico.

   Texto

Conteúdo a ser exibido como título do gráfico.

   Fonte

Tipo da fonte a ser utilizada no título do gráfico, incluindo dados sobre tamanho e estilo (negrito, itálico etc.) da fonte.

   Cor da Fonte

Cor da letra (fonte) do título do gráfico.

   Cor de Fundo

Cor de fundo da área correspondente ao título do gráfico.

Eixos XY

Duas barras, uma horizontal e outra vertical, representando os eixos cartesianos do gráfico.

   Exibir

Indicador lógico de exibição dos eixos cartesianos.

   Espessura

Espessura em pixels das barras referentes aos eixos cartesianos.

   Cor

Cor da barras de eixos cartesianos.

Rótulos das Séries de Valores

Textos identificadores das séries de valores, posicionado sob a barra vertical correspondente, logo após o eixo X.

   Exibir

Indicador lógico de exibição dos rótulos das séries de valores.

   Cor da Fonte

Cor da letra (fonte) dos rótulos das séries de valores.

   Fonte

Tipo da fonte a ser utilizada nos rótulos das séries de valores.

...
Quer ler esse conteúdo completo? Tenha acesso completo