ASP .NET - Gerando Gráficos com Chart e XML

ASP .NET - Gerando Gráficos com Chart e XML (bootstrap)

Hoje o nosso assunto será a geração de gráficos usando o componente Chart com os dados sendo obtidos de uma fonte de dados XML.

O Microsoft Chart Controls for. NET Framework permite criar gráficos 2D e 3D ricos em recursos e atraentes tanto a web (ASP.NET) como para aplicativos do Windows (WinForms).

Neste artigo eu vou mostrar como gerar um gráficos usando o componente Chart em uma aplicação ASP .NET que obtém os dados de um arquivo XML que iremos gerar a partir de uma tabela SQL Server.

Vamos usar o Visual Studio Express 2012 for web e assim já teremos incorporado o componente Chart na barra de ferramentas.

Preparando o arquivo XML a partir do SQL Server

Vamos começar gerando o arquivo XML com os dados que desejamos usar em nosso gráfico a partir de uma tabela de um banco de dados SQL Server Express.

Vamos supor que eu tenha uma tabela chamada Produtos em um banco de dados SQL Server chamado Cadastro.mdf.

Abra o Visual Studio Express 2012 for web e no menu FILE clique em New Project;

Clique em Visual Basic -> Web e selecione o template ASP .NET Empty Web Application informando o nome AspNetChart_XML e clique no botão OK;

Antes de prosseguir com o nosso projeto vamos abrir a janela DataBase Explorer. Clique no menu VIEW -> DataBase Explorer;

Expanda o item Data Connections e selecione a conexão com o banco de dados Cadastro.mdf para visualizar a tabela Produtos;

A tabela Produtos é bem simples e possui a seguinte estrutura:

id - int - primary key
descricao - nvarchar(100)
preco - decimal(12,2)

Possuindo as seguintes informações:

Vamos gerar um arquivo XML a partir destes dados no SQL Server.

Na janela Data Connections clique com o botão direito sobre a tabela Produtos e selecione New Query:

Na janela Add Table selecione Produtos e clique no botão Add;

A seguir marque as colunas descricao e preco e defina a consulta SQL :

SELECT descricao, preco FROM Produtos FOR XML Auto , elements

Para excutar a consulta clique na opção Execute SQL;

Os dados para descricao e preco serão obtidos e gerados no formato XML conforme abaixo:

<Produtos>
<id>1</id>
<descricao>Caneta</descricao>
<preco>1.25</preco>
</Produtos>
<Produtos>
<id>2</id>
<descricao>Lápis</descricao>
<preco>0.89</preco>
</Produtos>
<Produtos>
<id>3</id>
<descricao>Borracha</descricao>
<preco>0.32</preco>
</Produtos>
<Produtos>
<id>4</id>
<descricao>Régua</descricao>
<preco>0.55</preco>
</Produtos>
<Produtos>
<id>5</id>
<descricao>Caderno 100 folhas</descricao>
<preco>3.25</preco>
</Produtos>
<Produtos>
<id>6</id>
<descricao>Estojo</descricao>
<preco>4.25</preco>
</Produtos>
<Produtos>
<id>7</id>
<descricao>Apontador</descricao>
<preco>5.25</preco>
</Produtos>
<Produtos>
<id>8</id>
<descricao>Cola</descricao>
<preco>1.45</preco>
</Produtos>

Vamos criar um arquivo no formato XML chamado Produtos.xml em nosso projeto. Clique em PROJECT e a seguir Add New Item;

Selecione Data e o template XML File e informe o nome Produtos.xml e clique no botão Add;

Agora copie os dados XML obtidos no descritor SQL no arquivo aberto Produtos.xml e acrescente no início do arquivo a tag <root> e no final feche a tag </root> conforme abaixo:

Gerando o gráfico a partir do XML

Agora no menu PROJECT clique em Add New Item e selecione o template Web Form e informe o nome Default.aspx;

A partir da ToolBox vamos incluir um componente Chart e um controle Button na página Default.aspx;

Observe que estou usando os scripts do bootstrap e do jquery. Para isso eu criei as pastas Scripts, Styles e Images no projeto e copiei os arquivos do bootstrap e jquery para as respectivas pastas.

Obs: Veja detalhes de como usar o bootstrap no artigo: .NET - Usando BootStrap - pontapé inicial (Bootswatch e jetstrap)

Clicando na guia Design podemos visualizar a aparência da nossa página:

Para poder exibir os preços no gráficos selecione o componente Chart e pressione F4;

Na janela de propriedades clique em Series;

Na janela Series Collection Editor na guia Legend defina a propriedade IsVisibleLegend como True;

]

No evento Click do botão de comando btnDados vamos incluir o código abaixo que acessa o arquivo Produtos.xml e gera um DataSet vinculando-o em seguida ao componente Chart - graficoProdutos:

Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub btnDados_Click(sender As Object, e As EventArgs) Handles btnDados.Click
        Dim dataPath As String = MapPath(".") & "\Produtos.xml"

        Dim ds As New DataSet()
        ds.ReadXml(dataPath)
        Dim dt As DataTable = ds.Tables(0)
        Dim dataView As New DataView(dt)
        ' vincula XML
        graficoProdutos.Series(0).Points.DataBindXY(dataView, "descricao", dataView, "preco")
    End Sub
End Class

Executando o projeto a pagina Default.aspx será aberta e ao clicar no botão Vinculando com XML teremos o gráfico abaixo:

Pegue o projeto completo aqui: AspNetChart_XML.zip

Mar 1:43 E Jesus, advertindo-o secretamente, logo o despediu,

Mar 1:44 dizendo-lhe: Olha, não digas nada a ninguém; mas vai, mostra-te ao sacerdote e oferece pela tua purificação o que Moisés determinou, para lhes servir de testemunho.

Mar 1:45 Ele, porém, saindo dali, começou a publicar o caso por toda parte e a divulgá-lo, de modo que Jesus já não podia entrar abertamente numa cidade, mas conservava-se fora em lugares desertos; e de todos os lados iam ter com ele.

Referências:

José Carlos Macoratti