Atenção: esse artigo tem um vídeo complementar. Clique e assista!

Do que trata o artigo

O Chart é o novo controle introduzido no ASP.NET 4.0 usado pelo Visual Studio 2010. O artigo mostra como usar o controle para gerar gráficos para Web, de uma forma simples e produtiva.


Para que serve

O uso de gráficos é sem dúvida a forma mais fácil de se tirar conclusões, pois rapidamente podemos analisar um gráfico e tomar uma decisão, se compararmos por exemplo ao uso e análise de dados em tabelas ou relatórios em papel.

Em que situação o tema é útil

O Chart pode ser usado em aplicativos comerciais, em Web Sites que precisam apresentar estatísticas, totais agrupados, sistemas de pesquisas, controles de estoque, vendas, escolas, vestibulares, enfim, a possibilidade de se usar gráficos é imensa.

Resumo do DevMan

Este artigo apresenta o novo controle Chart do ASP.NET 4.0. Para estudá-lo, vamos usar dados reais baseados nas estatísticas da Gripe A no Brasil, para gerar relatórios gráficos. Vamos usar tecnologias interessantes para isso, como Generics, AJAX e LINQ.

Uma imagem vale mais do que mil palavras. Para gráficos então, isso é mais do que um ditado, é uma comprovação real. É muito simples olhar, por exemplo, um gráfico de pizza e notar que quase metade dos casos confirmados de Gripe A no Brasil está concentrado no estado de São Paulo. Pesquisas eleitorais, queda ou subida do dólar, indicadores da bolsa de valores, estatísticas de acesso a um site por horário (picos, número de acessos por dia, duração dos acessos, etc), são típicos casos em que um gráfico é a solução mais simples e rápida para fazer o usuário tirar suas conclusões, ou tomar decisões importantes. Uma empresa, analisando gráficos, pode decidir em que área vale a pena investir novos recursos durante a crise mundial para contornar possíveis prejuízos.

Enfim, o Excel já permite isso há anos. O que não era possível, pelo menos usando componentes nativos do .NET Framework, era criar gráficos na Web com o ASP.NET.

Na plataforma .net, principalmente no ASP.NET, desde suas primeiras versões (ASP.NET 1.1 e 2.0), nós temos algumas possibilidades para a construção de gráficos. Podemos fazer gráficos de barra simples, utilizando HTML básico. Basta manipular algumas tabelas, ligando a altura (ou largura) em pixels, com um valor tabulado que precisa ser representado no gráfico. Não é a solução mais elegante, mas já dá uma visão gráfica de uma determinada situação.

Para soluções mais avançadas, onde precisamos de gráficos mais modernos e elaborados, nós temos duas saídas. A primeira seria criar o nosso próprio engine de gráficos, que através de um conjunto de dados e parametros deve criar a imagem que irá representar o gráfico. Essa imagem é então renderizada no página Web da nossa aplicação. Não é uma tarefa trivial e muito menos simples, exigindo um trabalho que na maioria dos casos não compensa o esforço.

A segunda saída, e a mais utilizada até então, é a adoção de ferramentas de terceiros, que entre outras coisas oferecem soluções para a construção de gráficos. Entre elas podemos citar o DevExpress (www.devexpress.com), Telerik (www.telerik.com), o famoso Dundas (www.dundas.com), e diversos outros que encontramos por aí. O grande problema que temos na adoção de ferramentas de terceiros, está relacionado ao preço destes componentes, que muitas vezes inviabilizam o projeto original.

Agora, a partir do Visual Studio 2010 e ASP.NET 4.0, temos um novo controle chamado Chart, que será estudo neste artigo. Ele é totalmente personalizável, existem dezenas de propriedades que permitem configurar sua aparência, cores, layout, estilos, gradientes, painéis, legendas etc. Basta você observar algumas de suas propriedades na janela de propriedades, alterar e observar o resultado. Isso é muito simples. O que vou mostrar aqui é como trabalhar com o Chart com dados, usando técnicas interessantes mescladas ao exemplo, como Generics, AJAX, OO, JavaScript, Web Services e finalmente LINQ. Não vou me deter na configuração de sua aparência, como comentei, isso pode ser feito facilmente mesmo em tempo de design. Vamos nos deter nos fundamentos.

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