ASP .NET - Apresentando o controle Chart

Já faz algum tempo que a Microsoft Liberou o .NET Chart Control , oriundo do Dundas Charts, como um add-on gratuito para a plataforma .NET versão 3.5, oferecendo dessa forma um recurso com possibilidades muitos interessantes para a geração de gráficos tanto com ASP .NET como com aplicações Windows Forms, uma área muito carente na plataforma .NET.

A primeira coisa que você tem que fazer para ter disponível este recurso é efetuar os seguintes downloads:

Neste link você encontra exemplos e documentação sobre o componente: http://code.msdn.microsoft.com/mschart

Após você instalar os componentes você poderá abrir
o Visual Studio 2008 ou o Visual Web Developer 2008
Express e verificar na guia Data o ícone do controle
Chart conforme figura ao lado:

O controle Chart define todos os parâmetros e métodos necessários para criar e exibir gráficos em aplicações ASP .NET e Windows Forms. Cada gráfico pode ter um ou mais títulos que aparecem no topo do gráfico, além de legendas referentes a vários grupos de informação.

Cada gráfico criado com o controle Chart possui uma área de gráfico (Chart area) que define a região onde o gráfico será criado. Esta área possui diversos parâmetros de configuração relacionados aos eixos X e Y, gráficos 3D, etc. O objeto ChartArea é o componente chave que compõe o controle Chart.

O controle Chart permite criar diversos tipos de gráficos sendo muito fácil de ser utilizado a partir da ToolBox. Você pode obter informações detalhadas deste componente consultando a sua documentação em: Download details: Microsoft Chart Controls for .NET Framework.

Para iniciar eu vou mostrar como criar um gráfico simples em um web site ASP .NET usando este componente e a ferramenta Visual Web Developer 2008 Express Edition.

Abra o VIsual Web Developer 2008 e crie um novo web site usado o template ASP.NET Web Site, usando a linguagem VB .NET com o nome GraficoWeb;

Na janela Solution Explorer selecione a página Default.aspx criada por padrão e altere o modo de exibição para Design;

A seguir , a partir da ToolBox, na guia Data, selecione, arraste e solte o componente Chart na página Default.aspx conforme abaixo:

Note que o tipo de gráfico padrão e um gráfico de colunas, ou seja , a propriedade CharType é definida como Column. Para definir outro tipo de gráfico em tempo de projeto selecione o controle e na janela de propriedades procure por Series e clique no botão a esquerda;

Na janela Series Collection Editor selecione a propriedade ChartType e verifica as 25 opções de tipos de gráficos disponíveis:

Apenas por curiosidade vamos dar uma espiada no código gerado selecione a guia Source da página:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register assembly="System.Web.DataVisualization, Version=3.5.0.0, 
Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" 
tagprefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width: 347px">
    
        <asp:Chart ID="Chart1" runat="server">
            <series>
                <asp:Series Name="Series1">
                </asp:Series>
            </series>
            <chartareas>
                <asp:ChartArea Name="ChartArea1">
                </asp:ChartArea>
            </chartareas>
        </asp:Chart>
    
    </div>
    </form>
</body>
</html>

Neste primeiro exemplo eu vou usar alguns dados de uma fonte de dados, fazer a vinculação com o controle Chart e exibir o resultado em uma página ASP .NET.

Selecione o controle na página e na smart tag Chart Tasks selecione <New data source...>;

Na janela Data Source Configuration Wizard selecione a opção DataBase e clique no botão Ok;

Selecione uma conexão com o banco de dados Northwind.mdf. Se você não possuir esta conexão clique no botão New Connection e crie a conexão;

No meu exemplo a conexão já foi criada no SQL Server Management Studio e pode ser selecionada conforme abaixo:

Clique em Next>;

Na janela a seguir aceite o nome padrão para a conexão e clique em Next>;

Na janela Configure Data Source,marque a opção : Specify a custom SQL statement or stored procedures e clique em Next>;

Na próxima janela digite a instrução SQL abaixo que irá gerar a nossa fonte de dados. Ele listar a quantidade de produtos por categoria;

Clique em Next> e a seguir em Finish;

Selecione o controle Chart e na janela de propriedades clique na propriedade ChartAreas;

Será aberta a janela ChartArea Collection Editor;

Na propriedade Axes clique no botão para abrir a janela Axis Collection Editor e em OK para fechar a janela ChartArea Collection;

Define a propriedade 'Title' do eixo X como Categorias e o título do eixo Y como Produtos e clique em OK;

Com o controle Chart selecionado procure a propriedade Series e abra a janela Series Collection Editor;

Na seção Data Source atribua o valor CategoryName a propriedade XValueMember e ProductCount a propriedade YValueMembers;

Defina também a propriedade IsValueShownAsLabel como True para exibir a quantidade de produtos nas colunas do gráfico e clique em OK;

Antes de executar o projeto você pode incrementar o visual do gráficos selecionando na janela de propriedades BackColor, BackGradientStyle e BorderSkin conforme abaixo:

 

Acrescente também um título ao gráfico usando a propriedade Titles do gráfico e definindo o titulo na propriedade Text da janela Title Collection Editor;

Executando o projeto iremos obter o gráfico abaixo exibindo a quantidade de produtos por categoria:

Obs: Se ao executar o projeto você obter o erro conforme a figura abaixo:

Abra o arquivo Web.config e altere a linha conforme indicado baixo incluindo a palavra POST.

....
   <add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, 
System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    validate="false" />
.......

Sentiu como é fácil definir um gráfico usando o assistente de configuração para o controle Chart. É claro que o controle possui mais recursos e que em outros artigos eu irei mostrar outras possibilidades.

Pegue o projeto completo aqui: demoGrafico.zip

Aguarde em breve mais artigos sobre o componente Chart.

Eu sei é apenas ASP .NET , mas eu gosto...

Referências:

José Carlos Macoratti