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ão é 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");