Artigos .NET Criando gráficos com Microsoft Chart Control em ASP.NET

Introdução


Diante de várias novidades a  Microsoft lançou em outubro o Microsoft Chart Controls for .NET Framework, no qual é um conjunto de controles que ajudam os desenvolvedores a representar dados através de gráficos 2d e 3d. Podendo utilizar estes controles (Chart controls) em páginas ASP.NET ou aplicações Windows (Windows Forms) de maneira muito simples para representar dados complexos.

Estes controles são gratuitos e foram desenvolvidos para serem usados com o Microsoft Visual Studio 2008 e para uma melhor integração com o toolbox e IntelliSence foi disponibilizado o Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008.

Exemplo

Para começarmos o nosso exemplo de gráfico, baixe e instale o Microsoft Chart Controls for .NET Framework e em seguida o Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008.

Passo 1

Após a instalação do componente vamos abrir o visual studio e criar o nosso projeto web chamado TesteGrafico. Para isso abra o Visual Studio 2008 no menu File, New, Web Site. Escolha o template ASP.Net Web Site e digite o caminho no campo location. Como mostra na Figura 1 o caminho ficou C:\PROJETOS\TESTEGRAFICO.

 

Figura 1 – Criando o projeto WEB

Passo 2

Para trabalharmos os dados no gráfico vamos criar um banco bem simples seguindo o DER da figura 2.

 
Figura 2 – DER do bando de dados testeChart

O banco possui duas tabelas, uma de categorias e outra de produtos, a tabela de produtos possui um relacionamento para categorias. Cada produto possui uma categoria. Para facilitar deixei o banco disponível para download no endereço http://afc70g.bay.livefilestore.com/y1pX5DPyp0dnG3wJtsbzjq4eBrLrs_FG5CLj_sejuFR9xXqQZTsdNEB_R1IwqKF7hejXL5tKfgNjjF9_dlNL4f-dA/testeChart.zip?download. Descompacte este arquivo na pasta App_Data que fica dento do seu projeto, e após esse processo volte ao Visual Studio 2008 e clique na pasta App_Data no seu solucion explorer e clique em Atualizar como mostra a figura 3.

 
Figura 3 – Solution explorer com o banco criado

O banco já possui cadastradas algumas categorias e produtos. Também possui uma Stored Procedure chamada TotalCategorias, mostrada no quadro 1, que retona a lista de categorias com nome e seu percentual dos produtos cadastrados, para saber quais categorias mais possuem produtos.

CREATE PROCEDURE dbo.TotalCategorias
AS
    declare @total as int
    set @total=(SELECT        COUNT(id_categoria) AS total FROM produtos)


    SELECT        p.id_categoria,c.nm_categoria, COUNT(p.id_categoria)*100/@total as percentual
FROM            produtos p(nolock) inner join categorias c(nolock)
on p.id_categoria=c.id_categoria
GROUP BY p.id_categoria,c.nm_categoria

Quadro 1 – Stored Procedure TotalCategorias

Passo 3

Após o bando de dados pronto vamos utilizar o LINQ para comunicação com a aplicação. Clique com o botão direito no projeto, no menu Add New Item, escolha o template Linq to Class e o nome do arquivo como loja.dbml como mostra na figura 4.

 
Figura 4 – Adicionando o arquivo do Linq para comunicação com o banco de dados

Abra o Server Explorer do Visual Studio e aparecerá o nosso banco. Para configurar o nosso arquivo basta arrastar as tabelas de Categorias e Produtos para a parte esquerda do arquivo loja.dbml e a Stored Procedure TotalCategorias para a parte direita. O resultado final deve ficar como a figura 5.

 
Figura 5 – Arquivo loja.DBML configurado

Passo 4

Vamos ao que interessa, incluir o gráfico na nossa página Default.aspx. O componente de gráfico aparece na aba Data como mostra a figura 6.


Figura 6 – Toolbox com o componente Microsoft Chart Control

Dê dois clique no componente que ele será adicionado a sua página. Mude o nome do componente de Chart1 para Grafico1 e a propriedade WIDTH de 300px para 400px.
Vamos adicionar o código do quadro 2 no Page_Load do arquivo Default.aspx.cs para popular os dados da Stored Procedure TotalCategorias no gráfico.

        if (!IsPostBack)
        {
            lojaDataContext ldc = new lojaDataContext();
            Grafico1.DataSource = ldc.TotalCategorias();
            Grafico1.DataBind();
        }

Quadro 2 – Código para popular os dados da Stored Procedure TotalCategorias no gráfico

Passo 5

Com o gráfico já populando os dados é hora de configurar a apresentação dos dados. Vamos mostrar um gráfico de pizza pois a Stored Procedure retorna o percentual de produtos cadastrados nas categorias.
Nas propriedades do Grafico1 clique em Series. No quadro que aparecerá preencha o XValueMember com o campo NM_CATEGORIA e o YValueMember com o campo PERCENTUAL como mostra a figura 7. No mesmo quadro mude o ChartType para PIE (gráfico de pizza). Por ultimo a propriedade IsValueShownAsLabel para TRUE, isso faz com que o valor percentual apareça em cada fatia da pizza. Clique em OK para fechar a janela Series.

 
Figura 7 – Associação dos campos no quadro Series

Voltando nas propriedades do Grafico1 clique em Legends. Clique em Add para adicionar a legenda de gráfico e clique em OK para fechar a janela Legends.
Por ultimo vamos criar um título, nas propriedades do Grafico1 clique em Titles. Clique em Add e preencha a propriedade (Text) com o texto “Divisão das categorias dos produtos”.

Resultado

Pronto! Simples, prático e rápido ao estilo .Net de ser e como diz Ramon Durães “Não tem que ser difícil”. O resultado pode ser conferido na figura 8.

 
Figura 8 – Gráfico de pizza das categorias

Esse componente serve para colocarmos gráficos no meio da página web ou mesmo dos forms em aplicativos windows. Este post foi só uma amostra do que a ferramenta pode fazer.

Um grande abraço
Tiago Silva Dantas Franco