.NET

17 set, 2010

VB .NET – Criando gráficos no VB 2010 Express Edition

Publicidade

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 assim um recurso com possibilidades muito 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 esse recurso é efetuar os seguintes downloads:

Neste link, você encontra exemplos e
documentação sobre o componente:

http://code.msdn.microsoft.com/mschart

O texto acima foi retirado do meu artigo antes da liberação
da versão 4.0 da plataforma .NET.

Se você deseja seguir um caminho mais fácil, basta fazer o download
do Visual Basic 2010 Express Edition e depois instalar – vai verificar na aba Data o controle Chart já presente, instalado e
pronto para ser usado. Como diria o mineiro: “Eita
trein bão só….”

Pois este artigo vai mostrar como usar o controle Chart para criar
gráficos em aplicações Windows Forms usando o Visual
Basic 2010 Express Edition.

Abra o seu Visual Basic 2010 Express Edition e
no menu File selecione New Project e o template Windows
Forms Application e informe o nome: Grafico_VB_Chart e clique em
OK;

Será criado o projeto contendo um formulário form1.vb e a pasta My
Project.

Vamos começar com algo bem simples.

Vamos acessar o banco de dados Northwind.mdb e a tabela
Products, selecionar o nome dos produtos e as unidades em estoque, e criar
um gráfico dos produtos e de seu estoque usando o controle Chart.

Gerando a fonte de Dados para o Gráfico

Vamos iniciar criando um DataSource no menu Data -> Add New Data Source.

Nessa janela selecione DataBase e clique em Next>.

A seguir selecione o item DataSet e clique em Next>.

Defina a conexão com o banco de dados Northwind.mdb, clicando em New
Connection e selecionando este arquivo na pasta onde você o colocou.

Selecione a tabela Products e marque apenas os campos ProductName e
UnitsInStock e clique em Finish.

Será criado o DataSource representado pelo dataset NorthwindDataSet.xsd na
janela Solution Explorer.

Selecione este arquivo e abra-o no descritor dataset. Clique com o botão
direito sobre ProductsTableAdapter e selecione Configure.

Na próxima janela, altere a instrução SQL original:

SELECT ProductName, UnitsInStock FROM Products   

para

SELECT TOP 5 ProductName, UnitsInStock
FROM Products
ORDER BY ProductName

Assim, estamos selecionando apenas os 5 primeiros produtos, por ordem de nome do produto.

Clique em Finish e salve o DataSet alterado.

Vamos agora criar o nosso gráfico com base no DataSource gerado.

Gerando o Gráfico a partir do DataSource

Selecione o formulário form1.vb e, a partir da
ToolBox, arraste e solte o
controle Chart no formulário, ajustando o seu tamanho de forma adequada conforme
a  figura abaixo:

Selecione o controle Chart1 gerado no formulário e, na janela de propriedades,
vamos definir a propriedade DataSource.

Clique nessa propriedade e selecione o dataset NorthwindDataSet gerado
anteriormente e a tabela Products do DataSet.

Selecione a propriedade Series e clique ao lado de
Collection para abrir a
janela Series Collection Editor.

Expanda a propriedade DataSource e defina a propriedade XValueMember como
igual a ProductName, e YValueMember como igual a UnitsInStock.

Define também a propriedade IsValueShowAsLabel de Label como True e clique em
OK.

Executando o projeto agora você irá ver o seguinte gráfico:

Nada mal, mas podemos melhorar… e vamos fazer isso incluindo os seguintes
detalhes no gráfico:

Incrementando a aparência do gráfico

Incluir um Título no gráfico:

  1. Selecione a propriedade Titles e clique em Collection;
  2. Na janela Title Collection Editor clique no botão Add;
  3. Na propriedade Text digite o título do gráfico: Estoque dos 5 Produtos – e
    clique em OK.

Definir uma aparência mais elegante para o nosso gráfico:

  • Selecionando a propriedade BackColor do controle Chart e definindo uma cor
    para destacar o gráfico;
  • Selecionando a propriedade BorderSkin do controle Chart1 e selecionando um
    Skin da sua preferência;

  • Selecionando a propriedade Palette e definindo um conjunto de cores
    para o gráfico.

E dessa forma podemos alterar também o tipo de gráfico exibido, selecionando a
propriedade Series e, na propriedade Chart da janela Series Collection Editor,
definir a propriedade CharType para o tipo de gráfico desejado.

Para obtermos um gráfico em 3D, basta selecionar a propriedade ChartAreas e
expandindo a propriedade Area3DStyle da janela ChartArea Collection Editor, defina a propriedade
Enabled3D como true.

Após essas configurações, executando o projeto iremos obter:

Um pouco melhor, não é mesmo?

Pegue o código completo usado no
artigo aqui: 
Grafico_VB_Chart.zip

Na continuação deste artigo, vou mostrar como gerar
gráficos usando outras fontes de dados como arrays.

Eu sei, é apenas VB .NET,
mas eu gosto…