Chart - novo componente integrado


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