Charting com ASP.NET MVC

Com o crescimento da utilização do ASP.NET MVC, novas duvidas tem surgido, e com elas algumas soluções não tão legais.
Na implementação de gráficos por exemplo, é possível encontrar algumas sugestões bem interessantes, mas que vão contra alguns princípios do padrão MVC. Dessas soluções podemos citar como exemplo criar codebehind na View para que o gráfico seja criado como no finado WebForms através de web controls, ainda neste sentido outra solução é escrever o código que gera o gráfico direto na View e dar um response.write na stream gerada no gráfico. Ambas soluções apresentadas ferem o conceito de KIS (Keep It Simple) pra quem não conhece esse conceito é só dar uma olhadinha nesse vídeo muito bem bolado pela galera do Rails.

Desta forma, você encontrará abaixo uma forma mais elegante de trabalhar com Gráficos no ASP.NET MVC.

Então, chega de embromation e mãos a obra, nesse exemplo foram utilizados:
- Visual Studio 2010 RC,
- .NET 4
- ASP.NET MVC 2
- Biblioteca Chart Controls da Microsoft. Disponível para download aqui (Após o dowload, execute o setup)

Lembrando que esse artigo não tem como objetivo discorrer sobre os recursos da biblioteca de gráficos da Microsoft, mas sim apresentar uma maneira elegante de trabalhar com ela juntamente com ASP.NET MVC.

Passo 1 – Crie um projeto ASP.NET MVC e dê um nome de sua preferência.

Passo 2 - Adicione no projeto a referência a System.Web.DataVisualization

Passo 3 - Criar um ActionResult para Gerar o Gráfico.

Para simplificar um pouco optei por fazer as implementações na Controller HOME que já é criada por default no projeto de MVC.

Adicione os namespaces na System.IO e System.Web.Visualization.Charting no Controllers

using System.Web.UI.DataVisualization.Charting;
using System.IO;

Vamos criar o ActionResult que retornará uma imagem png do gráfico. Vamos ao código:

public ActionResult GerarGrafico()
{
    // Gerando duas series com 4 números aleatórios cada
    Random r = new Random();
    List valoresSeries1 = new List() { r.Next(100), r.Next(100), r.Next(100), r.Next(100) };
    List valoresSeries2 = new List() { r.Next(100), r.Next(100), r.Next(100), r.Next(100) };

    //Criando o Chart e setando suas propriedades gerais
    Chart grafico = new Chart();
    grafico.Width = 400; // largura
    grafico.Height = 320; // altura
    grafico.RenderType = RenderType.ImageTag; // Tipo da renderização do gráfico.
    grafico.BorderSkin.SkinStyle = BorderSkinStyle.Emboss; // Estilo da Borda
    grafico.BorderColor = System.Drawing.Color.FromArgb(26, 59, 105); // Cor da Borda
    grafico.BorderlineDashStyle = ChartDashStyle.Solid;
    grafico.BorderWidth = 2; // Largura da Borda
    grafico.Titles.Add("Gráfico com ASP.NET MVC"); // Título  - Pode haver mais de um título
    grafico.Palette = ChartColorPalette.BrightPastel; // Paleta para as cores das series

    //Adicionando Legenda
    grafico.Legends.Add("legend1");
    grafico.Legends["legend1"].Title = "Legenda"; //Titulo
    grafico.Legends["legend1"].LegendStyle = LegendStyle.Row; //Estilo da legenda    

    //Adicionando Area do Gráfico    
    grafico.ChartAreas.Add("Area1");
    grafico.ChartAreas["Area1"].Area3DStyle.Enable3D = false; // Se quiser 3D mude pra true e pronto :D

    //Adicionando as series e seus respectivos valores
    grafico.Series.Add("serie1");
    grafico.Series["serie2"].ChartType = SeriesChartType.Bar;
    foreach (double valor in valoresSeries1)
    {
        grafico.Series["serie1"].Points.AddY(valor);
    }

    grafico.Series.Add("serie2");
    foreach (double valor in valoresSeries2)
    {
        grafico.Series["serie2"].Points.AddY(valor);
    }    

    //Criando um Memory Stream pra ser passado para o response
    MemoryStream ms = new MemoryStream();

    //Salvando a imagem do gráfico no Memory Stream e definindo o formato da imagem
    grafico.SaveImage(ms, ChartImageFormat.Png);

    //Retorna um FileContentReult para o Response
    return new FileContentResult(ms.ToArray(), "image/png");
}

Pronto, agora já temos nosso método que retorna nosso gráfico, mas como exibi-lo?

Passo 4 : Inserir uma tag img na View.

Utilizei a View Home/Index também criada automaticamente com a criação do projeto.

<!-- Note que a URL da imagem é o Action Result Criado Anteriormente -->
<img src="<%=Url.Action("GerarGrafico","Home") %>" alt="Charting com ASP.NET MVC" />

Passo 5: Aperte F5 e seja Feliz! :D

Você deverá ver resultado semelhante a imagem abaixo:

Considerações finais:

Construindo gráficos desta forma você mantem sua View stupidamente simples e ainda não precisa salvar a imagem do gráfico no disco.

Aconselho fortemente a estudarem bastante esta biblioteca de gráficos, ela é muito rica, e possibilita muita coisa legal como a utilização de ajax para dados dinâmicos, vários estilos e formas de gráficos e etc. Além disso a Microsoft disponibiliza o Download de vários exemplos implementados que auxiliam bastante!

Então, por hoje é só.

Até a próxima.

Flavio Silva

@flavio1110

@DevIsland

MSN: flaviocsilva1110@hotmail.com