[Resolvido] ASP .NET MVC 3 - Usando o HTML Chart Helper

[RSS iMasters 5]

Se você precisa ou pretende exibir os seus dados em um formato gráfico em aplicações ASP .NET, pode utilizar os recursos do componente Html Chart Helper. Ele pode renderizar imagens que exibem os dados em uma variedade de tipos de gráficos, dando suporte para muitas opções de formatação. O componente pode renderizar mais de trinta tipos de gráficos, incluindo os formatos mais familiares, que já existem em ferramentas como o Microsoft Excel: gráficos de barra, de área, de pizza, de linha, etc.

Além disso, ele possui recursos para exibir nos gráficos outros elementos, como legendas, eixos, séries, etc. Os dados exibidos nos gráficos podem vir de diversas fontes, como arrays, arquivos XML, banco de dados, arquivos texto, etc.

Neste artigo eu vou apresentar o componente e mostrar como usar os seus recursos básicos em aplicações ASP .NET MVC. Vou usar o Visual Web Developer 2010 Express Edition em todos os exemplos usados aqui.

Criando o projeto MVC

Vamos criar um novo projeto usando o Visual Web Developer 2010 Express Edition. No menu File -> New Project selecione/informe :

• Visual C# -> Web
• ASP .NET MVC 3 Web Application
• Name : UsandoChartHelper

A seguir, selecione o template Internet Application e o View Engine Razor e clique em OK.

Na janela "solution explorer" veremos a estrutura do projeto que criamos e que vamos usar para criar nossos gráficos:

Criando um gráfico com dados

Vamos iniciar criando um gráfico de barras bem simples. Para isso vamos usar o arquivo About.cshtml da pasta Views->Home, alterando o seu código para:

@{

ViewBag.Title = "Usando Chart Helper";

}

<h2>About</h2>

<p>

@{

var macChart = new Chart(width: 600, height: 400)

.AddTitle("Campeonato Paulista - 2012")

.AddSeries(

name: "CampeonatoPaulista",

xValue: new[] { "São Paulo", "Corinthians", "Palmeiras", "Santos", "Mogi Mirim" },

yValues: new[] { "34", "34", "32", "30", "30" })

.Write();

}

</p>

About.cshtml

O código acima mostra como é simples criar um gráfico: basta criar uma instância da classe Chart e definir as dimensões do gráfico:

ar macChart = new Chart(width: 600, height: 400)

A seguir, usamos os métodos da classe Chart :

• AddTitle ? Adiciona um título à imagem do gráfico;
• AddSeries ? Adicionar várias séries, ou seja, os dados que serão informados no gráfico, para serem impressos na imagem do Chart;
• name ? Define o nome dado ao gráfico;
• xValue ? Define os valores que serão apresentados no eixo X;
• yValues ? Define os valores que serão apresentados no eixo Y;
• charType - Embora não tenha sido usado neste exemplo, este método define o tipo de gráfico usado, que pode ser: bar, pie, column, stock, area e line. Ex: charType : "Line";
• AddLegend - Também não foi usado no exemplo e adiciona uma legenda ao gráfico.

Para exibir o gráfico no navegador nós usamos o método Write(): Ex: Write() ou Write(format : "gif"). Altere também o arquivo _Layout.cshtml para exibir o texto Gráfico no menu About:

.....

<div id="menucontainer">

<ul id="menu">

<li>@Html.ActionLink("Home", "Index", "Home")</li>

<li>@Html.ActionLink("Gráfico", "About", "Home")</li>

</ul>

</div>

....

_Layout.cshtml

Agora já podemos executar o projeto:

Observe o menu Gráfico que, quando clicado, irá executar a Action About. Por sual vez, o Action About irá acionar a view About.cshtml, onde incluímos o código para gerar o gráfico que será exibido ao usuário.

Muito simples, não é mesmo ?

Vamos melhorar um pouco o nosso exemplo e mostrar também como alterar o tipo de gráfico gerado.

Do jeito que está, exibimos o gráfico diretamente, a partir da View About.cshtml. Vamos criar uma Action no controller HomeController para renderizar o gráfico e aproveitar para alterar o tipo do gráfico para pie (gráfico de pizza).

Abra o arquivo HomeController.cs da pasta Controllers e altere o seu código conforme mostrado abaixo:

using System.Web.Mvc;

using System.Web.Helpers;

 

namespace UsandoChartHelper.Controllers

{

public class HomeController : Controller

{

public ActionResult Index()

{

ViewBag.Message = "Usando Chart Helper";

return View();

}

 

public ActionResult About()

{

return View();

}

 

public ActionResult getGrafico()

{

var myChart = new Chart(width: 600, height: 400)

.AddTitle("Campeonato Paulista - 2012")

.AddSeries(

name: "CampeonatoPaulista",

chartType: "Pie",

legend : "Campeonato Paulista",

xValue: new[] { "São Paulo", "Corinthians", "Palmeiras", "Santos", "Mogi Mirim" },

yValues: new[] { "34", "34", "32", "30", "30" })

.Write();

 

return null;

}

}

}

Agora vamos criar uma View para exibir o gráfico. Clique com o botão direito sobre a Action getGrafico(), selecione a opção Add View, infrme o nome getGrafico e clique no botão Add.

A seguir, inclua o código abaixo no arquivo getGrafico.cshtml, que será criado na pasta Views->Home:

@{

ViewBag.Title = "getGrafico";

}

 

<h2>getGrafico</h2>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Index</title>

</head>

<body>

<h1>Usando Chart Help</h1>

<div>

<img src="/Home/getGrafico" />

</div>

</body>

 

</html>

Altere também o arquivo _Layout.cshtml para exibir o texto Gráfico no menu About:

.....

<div id="menucontainer">

<ul id="menu">

<li>@Html.ActionLink("Home", "Index", "Home")</li>

<li>@Html.ActionLink("Gráfico", "getGrafico", "Home")</li>

</ul>

</div>

....

Execute o projeto e clique no menu Gráfico. Isso irá acionar a Action getGrafico e a respectiva view. O resultado pode ser visto nas figuras abaixo:

Podemos também exibir a imagem resultante em outra página. Para exibi-la, você pode usar um elemento img HTML, da mesma forma que você faria para exibir qualquer imagem. No entanto, em vez de fazer referência a um arquivo .jpg ou .png, o elemento <img> referencia o arquivo .cshtml, que contém o chart helper que cria o gráfico. Quando a página de exibição for executada, o elemento <img> obtém a saída do chart helper e processa o gráfico.

No exemplo acima para obter este resultado faríamos assim:

1. Altere o conteúdo do arquivo getGrafico.cshtml conforme abaixo:

@{

ViewBag.Title = "getGrafico";

}

 

<h2>getGrafico</h2>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Index</title>

</head>

<body>

<h1>Test Chart</h1>

<div>

<img src="About.cshtml" />

</div>

</body>

 

</html>

Neste arquivo, a tag : <img src="About.cshtml" /> aproveita o conteúdo do arquivo About.cshtml (que usamos no início do artigo para exibir o gráfico) e exibe a imagem do gráfico.

Mas e seu eu quiser obter dados de um fonte, como um banco de dados? Nestes casos podemos usar o método DataBindingTable, que aceita qualquer valor que retorna um objeto IEnumerable.

Vamos, então, usando o exemplo acima, definir um Model em nossa aplicação para acessar o banco de dados Northwind.mdf e acessar os dados da tabela Products - exibindo o nome e preço de cinco produtos em um gráfico. Para isso vamos criar duas classes na pasta Models:

1. Produtos.cs - representa o nosso domínio, que é o produto;
2. ProdutosModel.cs - Realiza o acesso a tabela Products e retorna uma lista de cinco produtos;

Clique com o botão direito sobre a pasta Models e selecione Add Class, informando o nome Produtos.cs. A seguir defina o seguinte código neste arquivo:

namespace UsandoChartHelper.Models

{

public class Produtos

{

public object ProductName { get; set; }

public object UnitPrice { get; set; }

}

}

A seguir, repeita o procedimento e crie a classe ProdutosModel na mesma pasta. Defina o código abaixo neste arquivo.

Obs: Você deve incluir uma referência no projeto ao namespace System.Web.Configuration para poder usar a classe WebConfigurationManager e acessar a string de conexão do arquivo web.config;

Outra providência que deveremos tomar é incluir a string de conexão no arquivo Web.Config, incluindo na seção <connectionStrings> a linha abaixo:

<add name="conexaoNorthwind" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=Northwind;Integrated Security=True" />

Código do arquivo ProdutosModel:

using System.Collections.Generic;

using System.Data;

using System.Data.SqlClient;

using System.Web.Configuration;

 

namespace UsandoChartHelper.Models

{

public class ProdutosModel

{

public IList<Produtos> getProdutos()

{

string constr = WebConfigurationManager.ConnectionStrings["conexaoNorthwind"].ConnectionString;

string sqlstr = "Select top 5 ProductName, UnitPrice from Products";

SqlDataReader sqldr = null;

SqlCommand sqlcmd = null;

List<Produtos> listaProdutos = null;

 

listaProdutos = new List<Produtos>();

using (SqlConnection sqlcon = new SqlConnection(constr))

{

sqlcmd = new SqlCommand(sqlstr, sqlcon);

sqlcon.Open();

sqldr = sqlcmd.ExecuteReader(CommandBehavior.CloseConnection);

while ((sqldr.Read()))

{

Produtos produto = new Produtos();

produto.ProductName = sqldr.GetString(0).ToString();

produto.UnitPrice = sqldr.GetDecimal(1);

listaProdutos.Add(produto);

}

}

return listaProdutos;

}

}

}

Vamos, agora, abrir o arquivo HomeController na pasta Controllers e definir uma Action getGraficoDB, que obtém a lista de produtos e gera o gráfico conforme o código abaixo:

using System.Web.Mvc;

using System.Web.Helpers;

using UsandoChartHelper.Models;

 

namespace UsandoChartHelper.Controllers

{

public class HomeController : Controller

{

public ActionResult Index()

{

ViewBag.Message = "Usando Chart Helper";

return View();

}

 

public ActionResult About()

{

return View();

}

 

public ActionResult getGrafico()

{

var myChart = new Chart(width: 600, height: 400)

.AddTitle("Campeonato Paulista - 2012")

.AddSeries(

name: "CampeonatoPaulista",

chartType: "Pie",

legend : "Campeonato Paulista",

xValue: new[] { "São Paulo", "Corinthians", "Palmeiras", "Santos", "Mogi Mirim" },

yValues: new[] { "34", "34", "32", "30", "30" })

.Write();

 

return null;

}

 

public ActionResult getGraficoDB()

{

ProdutosModel produtosDB = new ProdutosModel();

var produtos = produtosDB.getProdutos();

 

var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Yellow )

.AddTitle("Os 5 Produtos Vendidos")

.DataBindTable(dataSource: produtos, xField: "ProductName")

.Write();

 

return null;

}

}

}

A action getGraficoDB() cria uma instância da classe ProdutosModel() e usando o método getProdutos().

Note o uso do método DataBindTable, onde definimos a fonte de dados através da propriedade datasource e o campo que iremos usar no eixo X, que é o nome do produto;

Obs: O método DataBindTable cria e vincula os dados da série com a tabela de dados especificada e, opcionalmente, preenche vários valores de X.

Agora, para criar a nossa view, clique com o botão direito sobre o método getGraficoDB e selecione Add View; na janela Add View aceite o nome getGraficoDB e clique no botão Add;

A seguir, defina o código abaixo no arquivo getGraficoDB.cshtml, gerado na pasta Views->Home:

@{

ViewBag.Title = "getGraficoDB";

}

<h2>getGraficoDB</h2>

 

<h2>getGrafico</h2>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Index</title>

</head>

<body>

<h1>Testando Chart Helper</h1>

<div>

<img src="/Home/getGraficoDB" />

</div>

</body>

</html>

Na view estamos usando a tag <img> para chamar a action getGraficoDB, que acionará a view getGraficoDB.cshtml exibindo a imagem.

Obs: Para poder exibir o menu com todas as opções da figura, temos que alterar o arquivo incluindo os ActionLinks, conforme código abaixo:

.....

<div id="menucontainer">

<ul id="menu">

<li>@Html.ActionLink("Home", "Index", "Home")</li>

<li>@Html.ActionLink("Gráfico", "GetGrafico", "Home")</li>

<li>@Html.ActionLink("Gráfico DB", "GetGraficoDB", "Home")</li>

<li>@Html.ActionLink("About", "About", "Home")</li>

</ul>

</div>

.....

Executando o projeto, iremos obter:

Se você quiser salvar o gráfico gerado, basta usar o méto Save(). No exemplo acima vamos fazer isso alterando o código da Action getGraficoDB do arquivo HomeController.cs para:

 public ActionResult getGraficoDB()

{

ProdutosModel produtosDB = new ProdutosModel();

var produtos = produtosDB.getProdutos();

 

var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Yellow )

.AddTitle("Os 5 Produtos Vendidos")

.DataBindTable(dataSource: produtos, xField: "ProductName")

.Save(@"c:\dados\graficoDB_Macoratti.jpg")

.Write();

 

return null;

}

Este código irá salvar o gráfico na pasta c:\dados com o nome graficoDB_Macoratti.jpg.

Outra opção é salvar o gráfico como um documento XML, usando o método SaveXml(). Para realizar esta tarefa, o código ficaria assim:

  public ActionResult getGraficoDB()

{

var arquivoXML = "/graficoDB.xml";

ProdutosModel produtosDB = new ProdutosModel();

var produtos = produtosDB.getProdutos();

 

var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Yellow )

.AddTitle("Os 5 Produtos Vendidos")

.DataBindTable(dataSource: produtos, xField: "ProductName")

.SaveXml(path:Server.MapPath(arquivoXML))

.Write();

 

return null;

}

Executando o projeto, veremos que foi salvo o arquivo graficoDB.xml na raíz do projeto, onde abaixo vemos o seu conteúdo:

Pegue o projeto completo aqui: UsandoChartHelper.zip

 

http://imasters.com.br/artigo/24841/dotnet/asp-net-mvc-3-usando-o-html-chart-helper