26/03/2015

C#CriandogrficoscomoChart

C# Criando grficos com o componente Chart

Se voc precisa criar grficos usando a linguagem C# ento ganhou o dia pois este artigo mostra como fazer isso usando o
componente Chart que j vem com a verso do Visual C# 2010 Express Edition.
Obs: Este artigo foi baseado no meu artigo para VB .NET VB .NET Criando grficos no VB 2010 Express Edition Macoratti.net
J faz algum tempo que a Microsoft Liberou o .NET Chart Control , oriundo do Dundas Charts, como um addon gratuito para a
plataforma .NET verso 3.5, oferecendo dessa forma um recurso com possibilidades muitos interessantes para a gerao de grficos
tanto com ASP .NET como com aplicaes Windows Forms, uma rea muito carente na plataforma .NET.
Ento se voc possui a verso do Visual C# 2008 a primeira coisa que voc tem que fazer para ter disponvel este recurso efetuar os
seguintes downloads:
Microsoft Chart Controls for Microsoft .NET Framework 3.5
Microsoft Chart Controls Addon for Microsoft Visual Studio 2008
Neste link voc encontra exemplos e documentao sobre o componente: http://code.msdn.microsoft.com/mschart
Se voc deseja seguir um caminho mais fcil basta fazer o download do Visual C# 2010 Express Edition e aps instalar, verificar
na aba Data o controle Chart j presente, instalado e pronto para ser usado.

Gerando grficos com Chart

Abra o Visual C# 2010 Express Edition e no menu File clique em New Project e selecione o template Windows Forms Application
informando o nome Graficos_Chart;
Abra a Toolbox na guia Data e verifique o componente Chart presente e pronto para ser usado.

Quando pensamos em grficos queremos exibir dados de alguma fonte e como primeiro exemplo vamos preparar uma fonte de dados
bem simples para usarmos como exemplo.
Vamos acessar usando o banco de dados Northwind.mdb e acessar a tabela Products selecionando o nome dos produtos e as
unidades em estoque e criar um grfico dos produtos e de seu estoque usando o controle Chart.
Gerando a fonte de dados (DataSource) usando um DataSet
Vamos iniciar criando um DataSource no menu Data clicando Add New Data Source;
Nesta janela selecione DataBase e clique em Next>;
http://www.macoratti.net/12/11/c_chart1.htm

1/11

26/03/2015

C#CriandogrficoscomoChart

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

Defina a conexo com o banco de dados Northwind.mdb clicando em New Connection e selecionando este arquivo na pasta onde
voc o colocou;

http://www.macoratti.net/12/11/c_chart1.htm

2/11

26/03/2015

C#CriandogrficoscomoChart

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;
http://www.macoratti.net/12/11/c_chart1.htm

3/11

26/03/2015

C#CriandogrficoscomoChart

Selecione este arquivo e abrao no descritor dataset; Clique com o boto direito sobre ProductsTableAdapter e selecione Configure;

Na prxima janela altere a instruo 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;

http://www.macoratti.net/12/11/c_chart1.htm

4/11

26/03/2015

C#CriandogrficoscomoChart

Clique em Finish e salve o DataSet alterado.

Vamos agora criar o nosso grfico com base no DataSource gerado.

Gerando o grfico a partir do DataSource

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

http://www.macoratti.net/12/11/c_chart1.htm

5/11

26/03/2015

C#CriandogrficoscomoChart

Selecione o controle Chart1 gerado no formulrio e na janela de propriedades vamos definir a propriedade DataSource;
Clique nesta 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 tambm a propriedade IsValueShowAsLabel de Label como True e clique em OK;

http://www.macoratti.net/12/11/c_chart1.htm

6/11

26/03/2015

C#CriandogrficoscomoChart

Executando o projeto agora voc ir ver o seguinte grfico:

http://www.macoratti.net/12/11/c_chart1.htm

7/11

26/03/2015

C#CriandogrficoscomoChart

Nada mal mas podemos melhorar... e vamos fazer isso incluindo os seguintes detalhes no grfico:

Incrementando a aparncia do grfico

1 Incluir um Titulo no grfico:
1. Selecione a propriedade Titles e clique em Collection;
2. Na janela Title Collection Editor clique no boto Add;
3. Na propriedade Text digite o ttulo do grfico: Estoque dos 5 Produtos e clique em OK;

2 Definir uma aparncia mais elegante para o nosso grfico:

Selecionando a propriedade BackColor do controle Chart e definindo uma cor para destacar o grfico;
Selecionando a propriedade BorderSkin do controle Chart1 e selecionando um Skin da sua preferncia;

http://www.macoratti.net/12/11/c_chart1.htm

8/11

26/03/2015

C#CriandogrficoscomoChart

Selecionando a propriedade Palette e definindo um conjunto de cores para o grfico;

E desta forma podemos alterar tambm o tipo de grfico exibido selecionando a propriedade Series e na propriedade Chart da janela
Series Collection Editor definir a propriedade CharType para o tipo de grfico desejado;

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

http://www.macoratti.net/12/11/c_chart1.htm

9/11

26/03/2015

C#CriandogrficoscomoChart

Aps estas configuraes executando o projeto iremos obter:

Um pouco melhor no mesmo ???

Se voc verificar o meu artigo sobre Chart usando o VB .NET vai notar que eu apenas repeti os mesmos procedimentos neste artigo.
Afinal o componente usado foi o mesmo.
Pegue o cdigo completo usado no artigo aqui:

Graficos_Chart_CSharp.zip

VejaosDestaquesenovidadesdoSUPERCDVB2012(sempreatualizado):
cliqueeconfira!
Quer migrar para o VB .NET ?
Veja mais sistemas completos para a plataforma .NET no Super DVD .NET , confira...
Quer aprender C# ??
ChegouoSuperDVDC#2012comexclusivomaterialdesuporteevdeoaulascom
cursobsicosobreC#.

Heb1:9AmasteajustiaeodiasteainiqidadeporissoDeus,oteuDeus,teungiucomleodealegria,maisdoquea
teuscompanheiros
Heb1:10e:Tu,Senhor,noprincpiofundasteaterra,eoscussoobrasdetuasmos
Heb1:11elesperecero,mastupermanecesetodoseles,comoroupa,envelhecero,
Heb1:12equalummantoosenrolars,ecomoroupasemudaromastusomesmo,eosteusanosnoacabaro.
http://www.macoratti.net/12/11/c_chart1.htm

10/11

26/03/2015

C#CriandogrficoscomoChart

Referncias:
Seo VB .NET do Site Macoratti.net
Super DVD .NET A sua porta de entrada na plataforma .NET
Super DVD Vdeo Aulas Vdeo Aula sobre VB .NET, ASP .NET e C#
Seo C# do site Macoratti.net
ASP .NET Usando o controle Chart Control Macoratti.net
VB .NET Criando grficos no VB 2010 Express Edition Macoratti.net
JosCarlosMacoratti

http://www.macoratti.net/12/11/c_chart1.htm

11/11