in ASP.NET

ASP.NET 4.0, Microsoft Chart Controls

Quando o assunto era gráfico, freqüentemente precisávamos adotar algum componente de terceiros, o que acabava gerando maiores custos e falta de padronização em nossos projetos.

Entretanto com o Reporting Services 2008 tivemos melhoras significativas em termos de gráficos e possibilidades na plataforma Microsoft, ainda na versão 3.5 do .NET foi lançado um pacote com estes recusos de gráficos, disponibilizando-os para o ASP.NET e Win Form.

No .NET 3.5 o Microsoft Chart Controls era disponibilizado separado, por download que poderia ser feito em:

http://www.microsoft.com/downloads/en/details.aspx?FamilyId=130F7986-BF49-4FE5-9CA8-910AE6EA442C&displaylang=en#QuickDetails

Com o Visual Studio 2010 e o .NET Framework 4, este recuso já é disponibilizado nativamente.

Entre os diversos tipos de gráficos disponíveis escolhi o Gráfico de barras para utilizar como exemplo:

Vou fazer um gráfico de barras com os seguintes valores de números de acessos:

List<Acesso> acessos = new List<Acesso>();
acessos.Add(new Acesso { valor = 300, data = "01/08/2010"});
acessos.Add(new Acesso { valor = 340, data = "03/08/2010"});
acessos.Add(new Acesso { valor = 231, data = "04/08/2010"});
acessos.Add(new Acesso { valor = 500, data = "02/08/2010"});

 

Agora vou adicionar o controle de Gráfico na minha página, e customizar algumas propriedades nele:

1) Title

  • ShadowColor: cor da sombra do texto
  • Font: estilo do texto
  • ShadowOffset: deslocamento da sobra to texto
  • Text: texto do titulo
  • ForeColor: cor do texto

2)Legends

  • Enable: abilita/desabilita as legendas

3)BorderSkin

  • SkinStyle: estilo da borda do gráfico

4)ChartArea

  • ChartArea: local para adicionar areas ao gráfico e customizar a exibição dos dados
  • Area3DSyle: customização para a area do gráfico ser exibida em 3d
  • AxisY: customização para o eixo Y do gráfico
  • AxixX: customização para o eixo X do gráfico

Após estas customizações temos o seguinte controle na página:

<asp:Chart ID="Chart1" runat="server">
<Titles>
    <asp:Title ShadowColor="32, 0, 0, 0"
    Font="Trebuchet MS, 14.25pt, style=Bold" ShadowOffset="3"
    Text="Acessos ao Site" ForeColor="26, 59, 105">
    </asp:Title>
</Titles>
<Legends>
    <asp:Legend Enabled="false" >
    </asp:Legend>
</Legends>
<BorderSkin SkinStyle="Emboss"></BorderSkin>
<ChartAreas>
    <asp:ChartArea Name="ChartArea1"
    BorderColor="64, 64, 64, 64" BackSecondaryColor="Transparent"
    BackColor="64, 165, 191, 228" ShadowColor="Transparent"
    BackGradientStyle="TopBottom">
        <Area3DStyle Rotation="10" Perspective="10"
         Enable3D="True" Inclination="15" IsRightAngleAxes="False"
            WallWidth="0" IsClustered="False" />
        <AxisY LineColor="64, 64, 64, 64">
            <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
            <MajorGrid LineColor="64, 64, 64, 64" />
        </AxisY>
        <AxisX LineColor="64, 64, 64, 64">
            <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
            <MajorGrid LineColor="64, 64, 64, 64" />
        </AxisX>
    </asp:ChartArea>
</ChartAreas>
</asp:Chart>

Com a estrutura do controle montada podemos adicionar Séries de dados (Series) com os valores em cada uma (Points). Lembrando que isso pode ser feito na página, e também, como nesse exemplo adicionado dinamicamente.

Neste exemplo vou adicionar os dados a partir de uma coleção de Acessos.

Series series = new Series();
series.ChartArea = "ChartArea1";
series.Name = "Series1";
series.Color = System.Drawing.ColorTranslator.FromHtml("#4B6C9E");
series.BorderColor = System.Drawing.ColorTranslator.FromHtml("#3A4F63");

foreach (var item in acessos)
{
    series.Points.Add(new DataPoint {
        YValues = new double[] { item.valor },
        ToolTip = item.data,
        AxisLabel = item.data });
}
Chart1.Series.Add(series);

Como resultado do exemplo teremos um grafico

 

Este post teve como finalidade apresentar um pouco do .NET Chart Controls, todos os recursos e possibilidades do Chart Controls pode ser encontrado em:

http://code.msdn.microsoft.com/mschart

Estou a disposição para dúvidas, criticas e sugestões.

Muito obrigado

Rodolfo