Criando Gráficos com ASP.NET 4.0 - Búfalo Informática

	Por Dennes Torres dennes@bufaloinfo.com.br Dennes Torres possui as certificações MCAD, MCSD,MCSE, MCDBA e MCT. Atualmente atua Como diretor da Búfalo Informática, líder do grupo de usuários DevASPNet no Rio de Janeiro e membro da liderança dos grupos getWindows e devSQL, também do Rio de Janeiro, podendo sempre ser encontrado na lista de discussão do grupo DevASPNet (devaspnet-subscribe@yahoogrupos.com.br) bem como nas reuniões do grupo. Mantém dois blogs em http://cidadaocarioca.blogspot.com

Criando um Gráfico de Pizza com ASP.NET 4.0

Pesquisa personalizada

Requisitos

Visual Studio .NET 2010 Beta 2

Framework .NET 4.0 Beta 2

SQL Server 2000 ou superior

Banco de exemplo Northwind - baixe aqui

Observações

Alternativamente é possível utilizar o Visual Studio .NET beta 1 ou Alpha (distribuido durante o PDC) porém com alterações nos procedimentos passo-a-passo que são demonstrados.

Também é posível utilizar o Visual Studio .NET 2008 com os Chart Controls anunciados por ScottGu, mas da mesma forma haverão diferenças no passo-a-passo

O Framework.NET 4.0 já traz um webControl de gráficos nativo para o ASP.NET. Neste artigo vamos ver um exemplo da criação de um gráfico de pizza e utilização de alguns de seus recursos.

Criando o Projeto

Vamos criar um novo webSite para fazermos nossos testes utilizando o menu file->New->Web Site

Acesso a Dados

A query de acesso a dados precisa trazer um conjunto de dados adequado para a montagem de um gráfico. Neste exemplo vamos trazer os 5 produtos com os maiores totais de vendas.

Eis a query :
select top 5 b.productid,productname, sum(quantity) as total from
[order details] a, products b where a.productid=b.productid
group by b.productid,productname
order by total desc
É feito um join entre [order details] (que possui os detalhes - incluindo valores - das vendas) e Products (que possui os dados dos produtos).

Os dados são agrupados por produto para que possa ser obtido o total de vendas de cada produto e ordenados pelo total em ordem decrescente, para trazer os 5 produtos com as maiores vendas.

Criando um DataSet

Criaremos um dataset para acessar os dados que serão utilizados no gráfico. Claro que poderíamos fazer de outras formas, um simples sqlDataSource resolveria, mas para uma das funcionalidades do gráfico os dados precisam ser acessados em mais de um local, o que nos leva ao uso do dataset neste exemplo.

1) Crie um novo dataset chamado dsGrafico

2) A partir da toolbox, insira um tableAdapter no dataSet

3) Selecione a opção para utilizar instruções SQL

4) Copie a instrução SQL que está mais acima neste artigo e cole no espaço adequado no wizard do TableAdapter.

5) Siga adiante no Wizard mantendo as opções default.

Criando uma classe

Como demonstraremos, para algumas funcionalidades acessaremos os dados mais de uma vez em sequencia. Para otimizar este acesso, criaremos uma classe que, uma vez acessados os dados, os manterá em sessão.

Existem contra-indicações para este método, como excesso de dados em memória, manutenção de um cache de dados, etc, mas o objetivo principal deste artigo é demonstrar as funcionalidades em um gráfico de pizza.

Veja como fica a classe :

Visual Basic :
Imports System.Web.HttpContext
Public Class DadosGrafico

Public Function Produtos() As dsGrafico.ProductsDataTable
        If IsNothing(Current.Session("produtos")) Then
                 Dim ta As New dsGraficoTableAdapters.ProductsTableAdapter
                 Current.Session("produtos") = ta.GetData()
        End If
        Return Current.Session("produtos")
End Function

End Class
C# :
public class DadosGrafico
{

    public dsGrafico.ProductsDataTable Produtos() 
      {
          if (HttpContext.Current.Session["produtos"]==null) 
             {
                    dsGraficoTableAdapters.ProductsTableAdapter ta = 
                            new dsGraficoTableAdapters.ProductsTableAdapter();

                     HttpContext.Current.Session["produtos"] = ta.GetData();
               }
               return (dsGrafico.ProductsDataTable)HttpContext.Current.Session["produtos"];
         }
}

Criando a página

1) Insira um objectDataSource

2) Configure o objectDataSource apontando para a classe DadosGrafico

3) Configure a opção de select do objectDataSource apontando para o método Produtos

Criando o gráfico

1) Insira um objeto Graph que você encontrará na aba Data

2) Utilizando a smartTag, defina o DataSource como o ObjectDataSource1

3) Utilizando a smartTag, defina o chartType como Pie

4) Utilizando a smartTag, defina o "x value member" como ProductName

5) Utilizando a smartTag, defina o "Y value member" como Total

6) Faça um "View in Browser" para ver o resultado até o momento

Formatando o Gráfico

Existem 3 opções de formatação do gráfico de pizza (pie) que merecem destaque, 2 opções de gráficos 2D e a opção de gráfico 3D.

1) Utilizando a janela de propriedades, acesse a propriedade Series e abra a janela Series Collection.

2) Vá ao final da coleção de propriedades desta janela e expanda a opção custom properties.

3) Altere a propriedade PieDrawingStyle para SoftEdge e dê ok. O resultado será visível em design-time.

4) Repita os passos de 1 a 3 alterando o valor para Concave. O resultado também será visível em design

5) Utilizando a janela de propriedades, acesse a propriedade ChartArea para abrir a janela Chart Area Collection

Um gráfico pode conter diversas Chart Areas. De fato, cada Chart Area é como um gráfico independente, permitindo que uma imagem seja formada por um gráfico de pizza e um gráfico de barras, por exemplo. Não abordaremos neste artigo o uso de múltiplas Chart Areas

6) Tendo selecionado a primeira (e única) chart area, expanda a opção no topo Area3dStyle

7) Mude a propriedade (Enable3d) para true

8) Dê Ok, a mudança para 3D será visível em design

Ajustando os Labels

1) Na janela de propriedades, vá até a propriedade Series e abra a janela Series Collection

2) Selecione a 1a serie (series1), vá até Custom Properties no final da janela de propriedades e altere a propriedade drawingLabelStyle para outside.

3) Use o "View in Browser", os labels estarão desenhados fora do gráfico

É comum que o gráfico fique pequeno com os labels fora do gráfico, isso pode ser corrigido.

4) Nas custom properties da series1, altere a propriedade MinimumRelativePieSize para 50

O valor é em percentual, determinando que o gráfico em si deve ocupar 50% do espaço, impedindo que ele fique pequeno demais.

Aumente o tamanho do webControl na página se isso for necessário.

5) Selecione a 1a serie (series1), vá até a propriedade Label e abra a janela strings keywords edition.

O label que será exibido nas fatias da pizza pode ser montado utilizando um conjunto de várias palavras chave.

Veja uma lista de palavras chave que podem ser utilizadas na montagem do label :

Palavra Chave Descrição

#VALX Valor X do DataPoint (ponto de dados)

#VAL Valor Y do DataPoint

#SERIESNAME Nome da série

#LABEL Label do DataPoint

#AXISLABEL Label do eixo do DataPoint

#INDEX Indice do DataPoint

#PERCENT Percentual do valor Y do DataPoint em relação ao total

#LEGENDTEXT Texto da legenda

#CUSTOMPROPERTY (customAttributeName) Valor de um atributo personalizado

#TOTAL Total dos valores Y da série

#AVG Média dos valores Y da série

#MIN Menor valor Y da série

#MAX Maior valor Y da série

#FIRST Primeiro valor Y da série

#LAST Último valor Y da série

6) Clique no botão "insert keyword" para abrir uma lista das palavras chaves disponíveis.

7) Insira o valor de X

8) Abra parentesis logo após a expressão inserida

9) Clique no botão "insert keyword"

10) Insira o valor de y em percentual dentro dos parentesis

A expressão resultante fica da seguinte forma : #VALX (#PERCENT)

11) Faça um "view in browser e veja o resultado

12) Os labels ficarão grandes. Altere a expressão do label para a seguinte : #VALX\n(#PERCENT)

13) Abra novamente a janela "series collection" e altere a propriedade LabelTooltip para o seguinte : Total de Vendas :#VAL{C}\nPercentual : #PERCENT

Observe como os valores inseridos através das palavras chave podem ainda ser formatados. Neste exemplo o valor (#VAL) está sendo formatado como moeda.

14) Faça um "View in browser", passe o mouse sobre os itens e veja o resultado.

Destacando uma fatia

Podemos destacar uma fatia fazendo um procedimento que é chamado de "explodir" a fatia. Isso é realizado utilizando uma Custom Property de um Data Point.

Como o nosso gráfico utiliza um datasource, os datapoints são criados dinamicamente e por isso a definição da custom property também precisará ser por código. Veja um exemplo :

Visual Basic :
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Chart1.DataBind()
        Chart1.Series(0).Points(4).CustomProperties = "Exploded=true"
End Sub
C# :
    protected void Page_Load(object sender, EventArgs e)
    {
        Chart1.DataBind();
        Chart1.Series[0].Points[4].CustomProperties = "Exploded=true";
    }
Neste exemplo apliquei a custom property especificamente no Data Point 4. Existe um truque para aplicar a custom property no datapoint de menor valor :
Visual Basic :
Chart1.Series(0).Points(Chart1.Series(0).Points.Count - 1).CustomProperties = "Exploded=true"
C# :
        Chart1.Series[0].Points[Chart1.Series[0].Points.Count - 1].CustomProperties = "Exploded=true";
Se a opção for para o de maior valor, basta utilizar o índice zero.

Definindo o título para o gráfico

1) Pela janela de propriedades do gráfico, acesse a propriedade Title e abra a janela title collection

2) Adicione um novo título, clicando no botão "Add"

3) Preencha a propriedade Text com o título

4) Utilize as demais propriedades para formatar o título

5) Opcionalmente, pode criar várias linhas de título

Criando Links para Detalhes nos Labels

O gráfico nos permite criar links nos labels para a exibição de mais detalhes sobre o item do label. Por exemplo, como estamos lidando com produtos, podemos criar links nos labels de produtos que levem a uma página com mais detalhes sobre os produtos.

É esta funcionalidade a causa de termos criado um dataset e uma classe no app_code ao invés de utilizarmos apenas um simples SQLDataSource.

1) Crie uma nova página chamada DetalhesProdutos.aspx

2) Na janela de propriedades do gráfico, na propriedade Series, abra a janela Series Collection

3) Em MapArea, defina a propriedade LabelURL como sendo DetalhesProdutos.aspx

4) Ajuste a propriedade LabelUrl para ~/DetalhesProdutos.aspx?cod=#INDEX

Desta forma estaremos passando o índice do item clicado como parâmetro para a página DetalhesProdutos.aspx

5) Faça um "view in browser", você poderá observar o link em cada label de produto.

6) Na página DetalhesProdutos.aspx programe o page_load de acordo com o código a seguir :
O parâmetro que a página DetalhesProdutos.aspx recebe é o índice do produto de acordo com a query usada para fazer o gráfico. Antes de podermos trazer mais dados do produto precisamos recuperar o código do produto.

Visual Basic :
Dim idProduto As Integer

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
                Dim dg As DadosGrafico
                Dim dt As dsGrafico.ProductsDataTable
                dt = dg.Produtos()
                idProduto = dt(Request.QueryString("cod"))("productid")
        End If
End Sub
C # :
    int idProduto;

    protected void Page_Load(object sender, EventArgs e)
    {
            if (!IsPostBack)
            {
              DadosGrafico dg =new DadosGrafico();
            dsGrafico.ProductsDataTable dt;
            dt = dg.Produtos();
            idProduto = dt[Request.QueryString["cod"]]["productid"];
            }
    }
Observe que foi necessário utilizar a classe dadosGrafico, solicitando novamente a dataTable utilizada para fazer o gráfico - e por isso tivemos o cuidado de guarda-la em sessão anteriormente, conforme comentado.
7) No dataset dsGrafico crie um novo tableAdapter com a seguinte query :
SELECT [Order Details].OrderID, Products.ProductName, [Order Details].UnitPrice, [Order Details].Quantity, [Order Details].Quantity * [Order Details].UnitPrice AS Total
FROM [Order Details] INNER JOIN
Products ON [Order Details].ProductID = Products.ProductID
WHERE ([Order Details].ProductID = @ProductID)
8) Troque o nome da DataTable para Vendas (o nome do TableAdapter se transformará em VendasTableAdapter automaticamente)

9) Na página DetalhesProdutos.aspx insira um ObjectDataSource e ligue-o com o tableAdapter VendasTableAdapter

10) Programe o evento Selecting do ObjectData da seguinte forma :
Visual Basic :
Protected Sub ObjectDataSource1_Selecting(ByVal sender As Object, ByVal e As 
System.Web.UI.WebControls.ObjectDataSourceSelectingEventArgs) 
Handles ObjectDataSource1.Selecting

              e.InputParameters("ProductId") = idProduto

End Sub
C # :
    protected void ObjectDataSource1_Selecting(object sender, ObjectDataSourceSelectingEventArgs e)
    {
        e.InputParameters["ProductId"] = idProduto;
    }
11) Insira uma gridview na página DetalhesProdutos.aspx e ligue-a ao objectDataSource

Conclusão

Apesar de ser relativamente simples utilizar o webControl Chart, ele esconde inúmeras variações de uso com alguma complexidade e isso considerando que neste artigo abordamos um dos mais simples tipos de gráficos disponíveis.

Envie seus comentários sobre este artigo

Veja abaixo os comentários já enviados :

Nome : Glebe Jr.	E-Mail :
muito bom o artigo, bem detalhado. Parabéns.
Nome : Pablo Rhuam	E-Mail : pablorhuam@hotmail.com
Olá, Dennes, tudo bem? Meus parabéns pelos ótimos artigos que você publica. Isso se deve ao fato de você ser uma pessoa engajada na profissão. Eu tenho uma dúvida, é possível eu utilizar o WebChart do VS 2010 e usa-lo num servidor que suporta .NET 2.0 ? Obrigado
Nome : Dennes	E-Mail : dennes@bufaloinfo.com.br
Oi, Para .NET 2.0 observe que existem componentes diferentes, coloquei o link no inicio do artigo, comentando que seriam para VS 2008. []'s Dennes

4	Formação Web
4	Desenvolvimento
4	Infraestrutura
4	Banco de Dados

4	Arquiteturas e Tecnologias
4	.Net
4	SQL Server
4	Visual Basic
4	DHTML / Java Script
4	ASP

Palavra Chave	Descrição
#VALX	Valor X do DataPoint (ponto de dados)
#VAL	Valor Y do DataPoint
#SERIESNAME	Nome da série
#LABEL	Label do DataPoint
#AXISLABEL	Label do eixo do DataPoint
#INDEX	Indice do DataPoint
#PERCENT	Percentual do valor Y do DataPoint em relação ao total
#LEGENDTEXT	Texto da legenda
#CUSTOMPROPERTY (customAttributeName)	Valor de um atributo personalizado
#TOTAL	Total dos valores Y da série
#AVG	Média dos valores Y da série
#MIN	Menor valor Y da série
#MAX	Maior valor Y da série
#FIRST	Primeiro valor Y da série
#LAST	Último valor Y da série

4	MCP
4	MCTS/MCPD
4	MCAD
4	MCSD
4	MCSD.NET
4	MCDBA
4	MCSE