Crie Gráficos Com O Controle Chart

Nas matérias anteriores falamos sobre o DataGridView, MasterPage, entre outras informações importantes para quem quer usar o ASP.NET para elaborar Sistemas ou Sites!

Quem já utilizou outras linguagens como o Delphi, Java, PHP, ASP, entre outros, sabe que na maioria das vezes para se desenvolver gráficos o programador demora para desenvolver!

A Microsoft através do ASP.NET procura facilitar ao máximo a vida de quem utiliza esta ferramenta e vem aumentando a cada dia o número de recursos nesta aplicação!

Hoje falaremos sobre o controle Chart e suas facilidades de uso.

Ele foi originado no Dundas Charts e hoje vem gerando várias possibilidades gráficas para quem o utiliza.

Com ele instalado, você poderá definir todos os parâmetros necessários para criar e exibir seus gráficos.

Antes de entrarmos na plataforma de desenvolvimento, para acompanharmos na prática suas possibilidades, gostaria de te pedir para acessar o site abaixo e efetuar os downloads disponíveis no endereço:

Baixe o Controls para o .NET Frameworks 3.5 e o Add-on para o Microsoft Visual Studio 2008.

OBS.: Através deste endereço, você terá acesso não somente aos instaladores, mas também a documentações.

Se você utiliza o Microsoft Visual Studio versão anterior à 2008, é essencial fazer a atualização para a versão 2008 ou superior.

Para criar nosso Projeto, abra o Microsoft Visual Studio e clique em “FILE”, “NEW” e em “Project” (conforme imagem abaixo).

Abrirá a tela a seguir, onde você poderá preencher os dados referente ao novo Projeto.

OBS.: Deverá abrir a tela principal (conforme a imagem a seguir).

Aberta a tela principal, vamos criar nosso novo Web Site.

Para isso, clique em “FILE”, “NEW” e em seguida em “Web Site” (conforme a imagem a seguir).

Após isso, abrirá a tela a seguir, onde poderemos dar início a nossas atividades.

Clique com o lado direito do mouse na Aplicação. Após abertura da aba, clique em “Add New Item” (conforme imagem a seguir).

Abrirá a página, onde você poderá configurar um novo ítem.

Clique em “Web Form”.

Em Name, altere o nome da página para “Default.aspx” (conforme a imagem a seguir).

Após criar a página, deverá aparecer a janela principal com todos os ficheiros.

Clique em “Default.aspx” e altere de “Source” para “Design”.

Vá em “Toolbox” e clique no ítem “Data”. Nela deverá aparecer o controle Chart (conforme imagem a seguir).

Arraste o componente Chart para a página “Default.aspx” e solte (conforme a imagem a seguir).

Por padrão é gerado um gráfico de colunas.

Caso seja necessário alterar o tipo de gráfico, selecione o controle Chart e em “Properties” procure por “Series”.

Ao clicar nele, aparecerão as opções para que você possa alterar.

Clique em “ChartType” e selecione a opção que você desejar (conforme imagem a seguir).

Bem… quem trabalha com gráficos, com certeza quer fazer uma consulta na base de dados e trazer os resultados. Correto?

Para isso, selecione o conteúdo que está na página e na “Chart Tasks” e selecione a opção “New data source” (conforme imagem a seguir).

Deverá abrir a tela a seguir:

Selecione a base de dados e dê andamento a suas configurações, selecionando as tabelas e campos que forem necessários.

OBS.: Não continuaremos com os gráficos, já que cada Programador utilizará a solução para uma finalidade!

Após selecionar a base de dados, efetuar o select em cima do que deseja trazer ao gráfico, selecione novamente o controle Chart e na Properties clique na propriedade “ChartAreas”.

Será aberta a janela “ChartArea Collection Editor” (conforme imagem a seguir).

Na opção “Axes”, clique no botãozinho com três pontinhos.

Deverá abrir uma outra janela (Axis Collection Editor). Clique em OK para fechar.

OBS.: Existem várias outras observações em Properties onde você pode melhorar seu Gráfico.

Recomendamos explorar esta área e ir testando as opções de acordo com suas necessidades!

Bem… espero ter lhe ajudado com este pequeno exemplo.

É apenas um início, pois você pode fazer muito mais!

Ficamos por aqui em mais uma matéria. Envie-nos suas dúvidas e dê sugestões para as próximas matérias! Nosso compromisso é lhe ajudar!