Chart – novo componente integrado ao Visual Studio .NET 2010

Olá Internautas,

 

            Gostaria
de falar hoje um pouco do novo componente integrado ao Visual Studio.NET 2010 e
framework 4.0. Esse componente chama Chart.
Com ele, você pode fazer gráfico online e muito mais.

 

Requisitos:

Linguagem: qualquer uma que está na ferramenta;

Ferramenta: Visual Studio.NET 2010

Framework: 4.0

 

            Um
dos componentes que sempre tive que estudar para fazer na aplicação web é o
gráfico. Sabe como “gerente, chefe e diretor” gostam desse tipo de coisa; nunca
vi. Pois é, antigamente para ter isso nas aplicações web ou desktop era um
parto e mesmo assim não ficava muito bom. Com o lançamento do Visual Studio.NET
2010, a Microsoft inovou colocando integrado esse componente na parte de
toolbox, isto é, uma tag normal.

 

            Um
gráfico de pizza é complicado demais,
ou pelo menos era complicado demais. Um gráfico de torre como este ai acima era mais ainda. Principalmente se não
tivesse componentes específicos pra isso.

            Os
componentes para a geração de gráfico são pagos e caros para usar, caso for
pessoal é mais complicado ainda, pois é nada mais nada menos que alguns reais;
muitos reais para ser mais específico.

            Talvez
para uma empresa, isso não tenha tanta importância e não seja tão caro assim,
mesmo assim, o importante agora é que a Microsoft inovou com seus componentes
integrados a ferramenta de desenvolvimento Visual Studio.NET 2010.

 

            Essas
imagens acima são exemplos do que foi feito no dia do webcast da comunidade
aspneti.com. Um gráfico normal e depois a transformação do mesmo para 3D. Se
você não foi assistiu online, perdeu feio! Mesmo assim, resolvi colocar o
código aqui para ser analisado e servir como exemplo para você. Não tenho o que
falar muito, o melhor é mostrar.

 

O código de referência 1.1 mostra o gráfico sem ser 3D.

 

 <div>

        <asp:Chart
ID=”chartWebcast” runat=”server”>

           
<Series>

               
<asp:Series Name=”compeoes” YValueType=”Int32″>

                   
<Points>

                        <asp:DataPoint
AxisLabel=”Mauricio” YValues=”29″ />

                       
<asp:DataPoint AxisLabel=”Ivan” YValues=”20″
/>

                       
<asp:DataPoint AxisLabel=”Ramon” YValues=”19″
/>

                       
<asp:DataPoint AxisLabel=”Roberto” YValues=”39″
/>

                       
<asp:DataPoint AxisLabel=”Junior” YValues=”9″
/>

                   
</Points>

               
</asp:Series>

           
</Series>

           
<ChartAreas>

               
<asp:ChartArea Name=”main”>

      

               
</asp:ChartArea>

           
</ChartAreas>

        </asp:Chart>

</div>

Referência 1.1

 

            Para
transformar o gráfico para 3D, é bem simples e fácil. Basta acrescentar uma
linha de código dentro do ChartArea.
Está em negrito o código que precisa ser acrescentado na transformação.
Referência 1.2

 

  <div>

        <asp:Chart
ID=”chartWebcast” runat=”server”>

           
<Series>

               
<asp:Series Name=”compeoes”
YValueType=”Int32″>

                   
<Points>

                       
<asp:DataPoint AxisLabel=”Mauricio” YValues=”29″
/>

                       
<asp:DataPoint AxisLabel=”Ivan” YValues=”20″
/>

                       
<asp:DataPoint AxisLabel=”Ramon” YValues=”19″
/>

                       
<asp:DataPoint AxisLabel=”Roberto” YValues=”39″
/>

                       
<asp:DataPoint AxisLabel=”Junior” YValues=”9″
/>

                   
</Points>

               
</asp:Series>

           
</Series>

           
<ChartAreas>

               
<asp:ChartArea Name=”main”>

               
     <Area3DStyle Enable3D=”true”
Inclination=”10″ LightStyle=”Realistic”

                   
Perspective=”15″ IsRightAngleAxes=”false”
IsClustered=”false” />

               
</asp:ChartArea>

           
</ChartAreas>

        </asp:Chart>

</div>

Referência 1.2

 

            Uma
pequena explicação: o código que fica dentro da tag Points é a parte mais importante do gráfico, ou seja, são os
valores (label e value) específico de cada torre do gráfico.

 

Bom, espero que você tenha entendi e qualquer problema pode entrar em
contato pelo site. Abraço a todos.

 

Mauricio Junior

www.mauriciojunior.org

blog.mauriciojunior.org