VB .NET - Criando gráficos no VB 2010 Express Edition - II

Esta é a segunda parte do artigo onde mostrei como gerar gráficos usando o controle Chart presente nativamente no Visual Studio 2010 e nas versões Express.

Para seguir os exemplos do artigo  basta fazer o download do Visual Basic 2010 Express Edition e após instalar, verificar na aba Data o controle Chart já presente, instalado e pronto para ser usado.

Este artigo vai continuar a mostrar como usar o controle Chart para criar gráficos em aplicações Windows Forms usando o Visual Basic 2010 Express Edition.

Antes de por a mão na massa devemos ter uma visão geral do que vem a ser um objeto chart ou gráfico; Um gráfico é constituído de diversos elementos sendo que todos pode ser acessados através da API do controle Chart que uma API criada sob o paradigma da orientação a objetos, sendo extensível e altamente flexível. Assim um objeto Chart suporta um número ilimitado de elementos como data series, data points em series, chart areas e assim por diante.

A seguir temos uma figura que ilustra os elementos chave que constituem um chart (ou gráfico):

Para detalhes de documentação e exemplo consulte os seguintes links:

Agora vamos mostrar alguns exemplos básicos usando a API Chart em aplicações Windows Forms.

Abra o seu Visual Basic 2010 Express Edition e no menu File selecione New Project e o template Windows Forms Application e informe o nome : Graficos_Chart e clique em OK;

Será criado o projeto contendo um formulário form1.vb e a pasta My Project;

Vamos começar com algo bem simples como a geração de gráficos com os dados existentes em arrays.

Arrays ???? Rápido um dicionário !!! Uhn... Vejamos :  

Arrays - Tipo de variável que armazena um conjunto de valores do mesmo tipo ; Um arranjo de elementos em uma ou mais dimensões ; Uma coleção de elementos do mesmo tipo no qual a posição de cada elemento está definida de forma única por um inteiro.

Obs: Os arrays são semelhantes aos vetores , se você já ouviu falar em vetores e conhece algo sobre eles verá que os conceitos envolvidos são semelhantes.

Vamos criar um gráfico que represente os 10 países mais populosos da América do Sul, com base na tabela obtida na Wikipédida exibida abaixo:

Será um gráfico bem simples onde no eixo Y iremos exibir os número de habitantes e no eixo X o nome dos paises.

Uma forma bem simples de fornecer esses dados para o gráfico é criar dois arrays com os dados referente aos habitantes e os nomes dos paises.

No formulário form1.vb do projeto inclua a partir da ToolBoox os seguinte componentes:

No início do formulário vamos definir o namespace:

Imports System.Windows.Forms.DataVisualization.Charting

A seguir logo após a declaração do formulário vamos declarar os arrays e preenchê-los com os dados conforme a seguir:

'define os valores do eixo y - milhoes de pessoas
Dim yPopulacao() As Double = {191480, 46000, 39934,28221, 28121, 16803,
                              13481, 9694, 6238, 3350}

'define os valoes do eixo x - nome dos paises
Dim xPaises() As String = {"Brasil", "Colombia", "Argentina","Peru", "Venezuela",
                           "Chile","Equador", "Bolivia", "Paraguai", "Uruguai"}

Obs: Observe que na nova versão do VB não precisamos usar mais o sublinhado(_) para indicar outra linha.

A seguir vamos incluir no evento Click do controle Button - btnGraficoTorta o código abaixo:

  Private Sub btnGraficoTorta_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnGraficoTorta.Click

        With Chart1
            'define o tipo de gráfico
            .Series(0).ChartType = DataVisualization.Charting.SeriesChartType.Pie
            'define o titulo do gráfico
            .Titles.Add("Os 10 países mais populosos da América do Sul")
            'habilita a visão em 3D
            .ChartAreas(0).Area3DStyle.Enable3D = True
            'define inclinação, rotação e perspectiva
            .ChartAreas(0).Area3DStyle.Inclination = 20
            .ChartAreas(0).Area3DStyle.Rotation = 50
            .ChartAreas(0).Area3DStyle.Perspective = 10
            'define o estilo da linha
            .ChartAreas(0).Area3DStyle.LightStyle = LightStyle.Realistic
            'define a paleta
            .Palette = ChartColorPalette.BrightPastel
            'vincula os dados ao gráfico
            .Series(0).Points.DataBindXY(xPaises, yPopulacao)
            'exibe os valores no eixo do gráfico
            .Series(0).IsValueShownAsLabel = True
        End With

    End Sub

Executando o projeto e clicando neste botão iremos obter:

Agora vamos definir o código no evento Click do outro botão para exibir o gráfico de linha:

Private Sub btnGráficoLinha_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnGráficoLinha.Click

        With Chart1
            'define o tipo de gráfico
            .Series(0).ChartType = DataVisualization.Charting.SeriesChartType.Line
            'define o texto da legenda 
            .Series(0).LegendText = "Países"

            .ChartAreas(0).Area3DStyle.LightStyle = LightStyle.Simplistic
            'define o titulo do eixo y , sua fonte e a cor
            .ChartAreas(0).AxisY.Title = "População (Milhões)"
            .ChartAreas(0).AxisY.TitleFont = New Font("Times New Roman", 12, FontStyle.Bold)
            .ChartAreas(0).AxisY.TitleForeColor = Color.Blue
            'define o titulo do eixo x , sua fonte e a cor
            .ChartAreas(0).AxisX.Title = "Países"
            .ChartAreas(0).AxisX.TitleFont = New Font("Times New Roman", 12, FontStyle.Bold)
            .ChartAreas(0).AxisX.TitleForeColor = Color.Blue

            'define a paleta de cores usada
            .Palette = ChartColorPalette.Chocolate

            'vincula os dados ao gráfico
            .Series(0).Points.DataBindXY(xPaises, yPopulacao)
            'exibe os valores nos eixos
            .Series(0).IsValueShownAsLabel = True
            'desabilita a exibição 3D
            .ChartAreas(0).Area3DStyle.Enable3D = False

        End With
    End Sub

A execução desta opção irá gerar o seguinte gráfico:

Para encerrar vamos exibir mais um gráfico do tipo Colunas com exibição em 3D, para isso inclua mais um botão de comando no formulário com Name = btnGraficoColuna e no seu evento Click inclua o seguinte código:

 Private Sub btnGraficoColunas_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnGraficoColunas.Click

        With Chart1
            'define o tipo de gráfico
            .Series(0).ChartType = DataVisualization.Charting.SeriesChartType.Column
            'define o texto da legenda 
            .Series(0).LegendText = "Países"

            'define o titulo do eixo y , sua fonte e a cor
            .ChartAreas(0).AxisY.Title = "População (Milhões)"
            .ChartAreas(0).AxisY.TitleFont = New Font("Times New Roman", 12, FontStyle.Bold)
            .ChartAreas(0).AxisY.TitleForeColor = Color.Blue
            'define o titulo do eixo x , sua fonte e a cor
            .ChartAreas(0).AxisX.Title = "Países"
            .ChartAreas(0).AxisX.TitleFont = New Font("Times New Roman", 12, FontStyle.Bold)
            .ChartAreas(0).AxisX.TitleForeColor = Color.Blue

            'define a paleta de cores usada
            .Palette = ChartColorPalette.Fire

            'vincula os dados ao gráfico
            .Series(0).Points.DataBindXY(xPaises, yPopulacao)
            'exibe os valores nos eixos
            .Series(0).IsValueShownAsLabel = True
            'habilta a exibição 3D
            .ChartAreas(0).Area3DStyle.Enable3D = True

        End With
    End Sub

Executando o projeto e clicando neste botão iremos obter:

É claro que poderíamos gerar outros tipos de gráficos e aplicar outros efeitos afinal a API Chart é muito poderosa mas nosso objetivo foi mostrar como é fácil gerar gráficos usando a API Chart que é nativa no VB 2010 Express Edition, no Visual Studio , no Visual C# e no Visual Web Developer.

Temos assim o acesso a um recurso poderoso e não precisamos pagar nada por isso.

Na continuação deste artigo irei mostrar como usar o databinding a diversas fontes de dados para gerar gráficos com a API Chart.

Pegue o código completo usado no artigo aqui: Graficos_Chart.zip

Eu sei é apenas VB .NET, mas eu gosto...

Referências:

José Carlos Macoratti