P>
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.
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. |
... |