ASP.NET MVC + ASP.NET Charting Controls

Fico surpreso quando percebo que muitas pessoas ainda não sabem que a Microsoft disponibilizou, há alguns meses, um controle para geração dinâmica de gráficos, utilizando a plataforma .NET, o chamado ASP.NET Charting Controls.

Estou finalizando um projeto que faz uso massivo de gráficos, e resolvi utilizar esta biblioteca extremamente útil. A documentação de como utilizar os controles com C# nãoimage é muito clara, mas existe uma aplicação Web (ASP.NET Web Forms) e Windows Forms com mais de 200 exemplos, onde é possível, tranquilamente, aprender a utilizar os recursos disponiveis.

Como utilizamos ASP.NET MVC na maioria dos projetos, a primeira observação que fiz foi que o ASP.NET Charting Controls era dedicado a ASP.NET Web Forms, com seu controle na velha forma “runat=’server’”. Como todos já devem saber, o ASP.NET MVC não faz uso¹ de controles server-side, o que teoricamente impossibilitaria o uso dos Charting Controls.

Em uma rápida análise na estrutura da solução dos controles, pude comprovar um pecado no seu desenvolvimento (realmente não sei se o código foi do zero ou herdado da Dundas): a solução para Web Forms e a solução para Windows Forms são totalmente dependentes da interface, o que impossibilita a reutilização do código de uma forma arquiteturalmente correta no ASP.NET MVC.

Porém, existe uma solução simples que resolveu nosso problema.
Ao configurar todo o objeto Chart, com nosso dados, eixos, e etc, é possível gerar um FileStreamResult – dentro do ASP.NET MVC – passando o contentType “image/png”.

Desta maneira é possível gerar o gráfico, e unido de Ajax, apresentá-lo sem maiores problemas aos usuários.

Ex.:

            var chart = new Chart();
chart.BackColor = Color.Transparent; chart.Width = Unit.Pixel(500); chart.Height = Unit.Pixel(400); Series series1 = new Series("Series1"); series1.ChartArea = "ca1"; series1.ChartType = SeriesChartType.Bar; series1.Font = new Font("Calibri", 8f, FontStyle.Regular); series1.Points.Add(new DataPoint { AxisLabel = "Value1", YValues = new double[] { 2 } }); series1.Points.Add(new DataPoint { AxisLabel = "Value2", YValues = new double[] { 1 } }); series1.Points.Add(new DataPoint { AxisLabel = "Value3", YValues = new double[] { 1, 5 } }); chart.Series.Add(series1); ChartArea ca1 = new ChartArea("ca1"); ca1.BackColor = Color.Transparent; ca1.Area3DStyle.Enable3D = true; chart.ChartAreas.Add(ca1);
            MemoryStream ms = new MemoryStream();
            chart.SaveImage(ms, ChartImageFormat.Png);
            ms.Seek(0, SeekOrigin.Begin);

            return new FileStreamResult(ms, "image/png");  
image 

Abraços!

Published Monday, September 28, 2009 5:35 PM by anobre

Comments

# re: ASP.NET MVC + ASP.NET Charting Controls

Friday, October 2, 2009 7:48 AM by Márcio Fábio Althmann

Gostei da solução.

Abraços.

# re: ASP.NET MVC + ASP.NET Charting Controls

Thursday, November 12, 2009 8:41 AM by Junior

Vc sabe como falar um grafico de colunas com os dados do sql e ainda mostrando uma legenda ?