ASP.NET Chart Control Pie - Gráfico de Fatias

Neste post vou dar um exemplo de como criar um gráfico em fatias (Pie). Cada fatia irá corresponder a um distrito, e o valor a apresentar será o volume de encomendas de todos os clientes (consoante o distrito). Para consultar a base de dados estou a usar LINQ To Entities mas facilmente adaptam isto à ORM que estiverem a usar.

Para utilizar-mos o Chart Controls da Microsoft, fazemos este download (link).
Após feito o download executamos o executável e se necessário reiniciamos o Visual Studio. No nosso projecto adiciona-mos a referência System.Web.DataVisualization. Se formos alojar a nossa aplicação num servidor Web e não instalar-mos a dll no servidor, convém irmos à lista de referências, seleccionamos a System.Web.DataVisualization e a System.Web.DataVisualization.Design e na propriedade Copy Local usamos True.

As tabelas que estou a usar são 3:
Encomendas - Na tabela de Encomendas precisamos de um campo com o valor líquido dessa encomenda e uma chave primária
Clientes - A tabela Clientes vamos precisar de um campo com uma chave primária para criar-mos uma relação à tabela Encomendas
Distritos - Basta-nos um campo com o nome do distrito e outro com a chave primária

Um ponto importante ao utilizarmos este controlo é a directoria onde vamos armazenar as imagens temporárias geradas pelo controlo. No meu caso precisei de alterar as permissões do utilizador para ter acesso à pasta, e criei-a dentro da App_Data por uma questão de privacidade.
No nosso Web.Config adiciona-mos uma nova chave na appSettings onde definamos as propriedades deste controlo, por exemplo:

<appSettings>
<add key="ChartImageHandler"  value="storage=file;timeout=20;URL=/App_Data/MicrosoftChartControls/"  />

O valor da propriedade timeout indica em segundos o tempo que a imagem é alojada. Como isto é um projecto Web, 20 segundos chegam bem para o cliente descarregar a imagem para os ficheiros temporários.

Configurado o controlo, falta-nos escrever o código para preencher o gráfico.
Como se trata de um gráfico em fatias, para lidar com os valores do eixo do X e do eixo do Y vou usar duas arrays: uma string para o nome dos Distritos (eixo do X) e uma decimal para o valor líquido das encomendas de todos os clientes desse distrito (eixo do Y).
Para saber-mos o tamanho das arrays contamos os Distritos presentes na tabela. Por exemplo:

var distritos = from dist in contexto.Distritos
                                    select dist;
                    decimal aux1;
                    decimal[] eixoY = new decimal[distritos.ToList().Count()];
                    string[] eixoX = new string[distritos.ToList().Count()];
                    int index = 0;

A variável aux1 vou utilizar como auxiliar para somar o valor das encomendas de cada Distrito, e a index é para adicionar-mos as entradas nas arrays nos índices correctos.

O que agora precisamos de fazer é percorrer todos os Distritos num ciclo, e por cada Distrito vamos seleccionar todas as encomendas cujos Clientes pertençam a esse Distrito (vamos unir a tabela Clientes e Encomendas na instrução). Vamos percorrer noutro ciclo essas mesmas Encomendas, e somando o valor delas (na variável aux1), para depois adicionar-mos à array (daí a variável index).

foreach (var s in distritos)
                    {
                        var cli = from encomendas in contexto.Encomendas
                                  join clientes in contexto.VendedoresClientes on cl.IDcliente equals enc.IDcliente
                                  where clientes.IDdistrito == s.IDdistrito
                                  select new
                                  {
                                      IDcliente = clientes.IDcliente,
                                      distrito = s.distrito,
                                      total = encomendas.total
                                  };
                        aux1 = 0;
                        foreach (var pa in cli)
                        {
                            aux1 = aux1 + Convert.ToDecimal(pa.total);
                        }

                        eixoY[index] = aux1;
                        eixoX[index] = s.distrito.ToString();
                        index = index++;
                    }

O código em cima mostra como criar os dois ciclos e adicionar os valores na arrays. É importante na instrução SQL ter a clausula onde o cliente tenha que pertencer ao Distrito do ciclo que estamos a percorrer (guardado na variável s).

Por fim, usamos as arrays para preencher o gráfico e defenimos algumas propriedades ao gráfico para ficar um gráfico de Fatias (Pie). Também adicionei uma legenda para mostrar os Distritos.

ChartDistritos.Series[0].Points.DataBindXY(eixoX, eixoY);

ChartDistritos.Series[0].ChartType = SeriesChartType.Pie;
ChartDistritos.ChartAreas[0].Area3DStyle.Enable3D = true;
ChartDistritos.Legends.Add(new Legend("D"));
ChartDistritos.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
ChartDistritos.Legends["D"].Title = "Distritos";

A equipa da Microsoft que desenvolveu este controlo para .NET disponibilizou-nos um projecto onde eles mostram os exemplos dos gráficos que existem, o código fonte em C# e VB e também nos permitem personalizar gráficos e consultar o código gerado. Podem fazer download deste projecto aqui (link).
Num projecto em que lidemos com Encomendas, a utilização de gráficos é muito útil e fácil de recorrer.

Fonte: http://pontonetpt.com/blogs/guilhermecardoso/archive/2010/06/08/asp-net-chart-control-gr-225-fico-de-fatias.aspx