Início > ASP.Net e C# > MS Chart no Visual Studio 2010

MS Chart no Visual Studio 2010

A Microsoft no Visual Studio 2008 no .Net Framework 3.5 disponibilizou o MS Chart, ou seja, gráficos, porém o MS Chart deveria ser instalado a parte, não acompanha o VS 2008. Com o Visual Studio 2010 no .Net Framework 4.0 isso mudou e o MS Chart foi disponibilizado nativamente.

Existem vários tipos de Chart como Column, Line, Pie, Doughnut, Point, Area entre outros. Nesse artigo vou explicar como desenvolver um gráfico em Column.

Para esse exemplo criei um banco de dados no SQL Server com três tabelas com a seguinte estrutura.

Esse modelo é só um exemplo para que possamos utilizar o MS Chart, após criar as tabelas, insira registros nessa tabela. Fique a vontade para adicionar a quantidade de registros que desejar.

Com nossa base de dados criada e populada, abra o Visual Studio e crie um projeto do tipo Web Application, chame o projeto de MSChart.

Abra a página Default.aspx.Primeiro passo é registrar na página Default.aspx que ela irá utilizar o MS Chart, então é necessário adicionar a declaração de registro, você pode colocar ela entre as tags <%Page > e <!DOCTYPE>. Segue abaixo o código de registro.

<%@ Register Assembly=”System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″    Namespace=”System.Web.UI.DataVisualization.Charting” TagPrefix=”asp” %>

Com essa tag adicionada, acesse a toolbox, na guia Data procure pelo componente Chart e o arraste para sua página Default.aspx.

O componente é exibido na tela. No canto superior direito existe um botão com uma seta para direita, clique nele e você visualizara algumas opção. Selecione a opção Choose Data Source e selecione a opção New Data Source para que a janela Data Source Configuration Wizard seja exibida.

Selecione SQL Database e chame nosso data source de dsVenda, conforme imagem abaixo.

Na tela seguinte será necessário informar a conexão com a base de dados, caso ela não exista você terá que criar.

Com a conexão criada, clique em next, será solicitado um nome para nossa conexão, fique a vontade para utilizar qualquer nome, no meu caso utilizei PEDIDOSConnectionString, clique em next.

Na tela Configure the Select Statement selecione a opção Specify a custom SQL statement or stored procedure e clique no botão next.

Na tela seguinte na guia SELECT em SQL statement coloque a seguinte consulta:

SELECT C.NOMECATEGORIA,
       SUM(D.QUANTIDADE) TOTALVENDA
  FROM CATEGORIA C INNER JOIN
       PRODUTO P ON P.CODIGOCATEGORIA = C.CODIGOCATEGORIA INNER JOIN
       DETALHESPEDIDO D ON D.CODIGOPRODUTO = P.CODIGOPRODUTO
 GROUP BY C.NOMECATEGORIA

Clique em Next e em Test Query clique no botão Test Query para verificar se a consulta está sendo executada corretamente. Clique em finish.

Acesse novamente a página Default.aspx, clique no componente Chart no botão localizado no canto superior direito, na opção X Value Member selecione NOMECATEGORIA e na opção Y value Members selecione TOTALVENDA. As informações devem ficar igual a imagem abaixo:

Agora execute seu projeto e visualize o resultado. Acesse também o Source da página Default.aspx para que você veja as informações que foram inseridas no Chart.

Espero que tenham gostado e até a próxima.

Anúncios
Categorias:ASP.Net e C# Tags:,
  1. Alex
    março 16, 2011 às 11:11 pm

    Gostaria de usar, porem utilizo um framework proprio e gostaria de saber como faço para povoar o grafico atraves de um metodo chamado o no Code Behind,Ex: como de fosse um Grid ou combo ??

  2. joao carlos
    agosto 15, 2011 às 4:15 pm

    obrigado muito bom seu trabalho me ajudou muito

    João Carlos Gonçalves
    Tecnico em Informatica
    Pesquisador cnpq

  3. Sebastião Martins
    abril 7, 2012 às 10:15 am

    Muito bom o seu trabalho. Ele está me auxiliando a utilizar o MS-VS-2010 para gerar informações gráficas.

    Sebastião Martins
    Tecnólogo em Processamento de Dados

  1. março 29, 2011 às 8:33 am

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: