Gráficos em ASP.NET com Microsoft Chart

O Microsoft Chart Controls for .NET Framework é um componente que auxilia na criação de gráficos 2D e 3D para representação de dados. Pode ser utilizado em aplicações Windows (Windows Forms) e páginas ASP.NET. Neste tutorial usaremos os Charts Controls (Controles) em uma aplicação ASP.NET.

Para usarmos os Charts Controls e gerar gráficos, é necessário ter o Visual Studio 2008 e o Microsoft .NET Framework 3.5 Service Pack 1 instalados em sua máquina.

Instalados?!… ok, Agora faça o download dos arquivos abaixo e instale os .executáveis.

Arquivos

• MSChart.exe [1.8 MB]: Opção1 – Opção2 MSChart_VisualStudioAddOn.exe [630 KB]: Opção1 – Opção2
• Banco de dados exemplo [139 KB]: Opção1

 

Criando o Projeto

Instalado o MSChart e o add-On, abra o Visual Studio 2008, crie um novo projeto em File/New/Project (Ctrl+Shift+N), verifique se o .NET framework 3.5 está selecionado como mostra a figura a baixo, insira o nome do projeto ExemploMSChart e clique em OK.

Criado o projeto, vá na aba Toolbox (Ctrl+Alt+X), expanda a opção Data, e adicione o componente Chart dando dois cliques.

Configurando Data Source

Antes de configuramos o Data Source temos que adicionar o banco de dados exemplo ao nosso projeto, para isso expanda a aba Solution Explorer (Ctrl+Alt+L), clique com o botão direito na raiz do projeto, vá em add, clique em Existing Item… procure o arquivo ControleAnual.mdb que foi baixado e clique em Add, como na figura a baixo.

Agora clique no componente Chart que inserimos anteriormente, irá aparecer uma seta no lado direito, clique-a, e em Choose Data Source selecione New data source.

Na tela Choose a Data Source Type do Data Source Configuration Wizard selecione Access Database e clique em OK.

Em Choose Data Base clique no botão Browser… e selecione o banco de dados exemplo que adicionamos ao projeto.

Agora iremos configurar a query que será mostrada no gráfico. Na tela Configure the Select Statement:

1. Marque Specify columns from a table or view;

2. Selecione a tabela ControleAnual;

3.  Em Columns marque todas os checkbox ou apenas o primeiro *;

4. Clique em Next >.

A tela Test Query como o nome já específica, serve para testar a query que configuramos no passo anterior. Clique no botão Test Query para ver o resultado, feito isso clique em Finish.

Configurando as Series do Chart

O componente Chart é baseado em series, é cada serie é composta por membros, um membro e representado por dois valores, o eixo X e o eixo Y.

No nosso projeto iremos criar dois membros que irá mostrar os cruzamentos de mês x receita (XValueMember="Mes" x YValueMembers="Receita") e mês x despesas (XValueMember="Mes" x YValueMembers="Despesas").

Para a configuração dos membros da series clique no componente Chart, vá em Properties (F4) e clique em Series.

Dentro do Series Collection Editor:

1. crie dois membros e nomeei-os de Receita e Despesas;

2. Em Data Source selecione Mes no campo XValueMember para ambos os membros, e em YValueMembers selecione Receita e Despesas respectivamente;

3. Expanda Label, selecione true em IsValueShownAsLabel;

4.  Clique em OK.

3D

Por default os gráficos são 2D, para gerar gráficos em 3D vá novamente em Properties (F4), clique em ChartAreas, expanda Area3DStyle e marque true em (Enable3D) para habilitar. Para finalizar insira o código abaixo no arquivo Web.config de seu projeto entre as tags <httpHandlers> … </httpHandlers> e execute-o.

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

Caso queira apenas visualizar o resultado do projeto você pode baixa-lo neste link:

ExemploMSChart - Projeto [26 KB]: Opção1

Para estudo deste componente a Microsoft disponibiliza projetos explicativos com exemplos em C# e VB para ASP.NET e Windows Formas. Baixe aqui, abra no Visual studio e execute.