Gráfico de barras

VB.NET - Criando um gráfico de barras

Quer fazer um gráfico de barras de seus dados sem usar muitos recursos nem queimar muitos neurônios ?

Vou mostrar um caminho feliz que se você trilhar chegará ao fim com seu gráfico de barras e nem vai perceber desta vez usando formulários windows.

Tudo bem, a aplicação que vou mostrar neste artigo será bem simples ,e , eu fico devendo algo mais elaborado. (quando eu tiver um tempo sobrando ...)

Neste artigo vou mostrar como criar um gráfico de barras vertical usando as técnicas básicas do GDI+. Neste artigo vou usar basicamente o método Graphics.DrawRectangle() que irá desenhar uma série de retângulos que irão representar as colunas do gráfico.

Inicie um novo projeto no VS.NET do tipo Windows Aplication usando a linguagem VB.NET. No formulário padrão (altere o nome do form para frmGrafico) insira um botão de comando (btnGeraGrafico) e alguns controles TextBox (txtJan, txtFev, txtmar, txtAbr, txtMai) e Labels correspondentes conforme o layout abaixo:

Para que possamos desenhar linhas e formas ou exibir imagens com GDI+ , precisamos criar um objeto Graphics. Este objeto representa uma superfície de desenho GDI+ e o objeto criado é usado para criar imagens gráficas.

Podemos trabalhar com gráficos de duas maneiras:

Criando um objeto Graphics
Usando um objeto Graphics para desenhar linhas e formas e manipular imagens.

Vamos criar um objeto Graphics a partir de um objeto que derive da classe Image. Fazemos isto usando o método Graphics.FromImage e fornecendo o nome da variável Image a partir da qual o objeto Graphics será criado. No nosso exemplo iremos usar um objeto BitMap.

Vamos declarar duas variáveis que serão usadas no projeto: Uma variável do tipo Graphics e outro do tipo BitMap.

Dim graficoArea As Graphics
Dim bmpArea As Bitmap

No evento Load do formulário vamos instanciar um objeto do tipo BitMap e atribuir ao objeto graficoArea um gráfico bitmap.

    Private Sub frmGrafico_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        bmpArea = New Bitmap(Width, Height)
        graficoArea = Graphics.FromImage(bmpArea)

   End Sub

NO evento Paint do formulário inclua o código que irá desenhar a imagem.

Private Sub frmGrafico_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint

        e.Graphics.DrawImage(bmpArea, 0, 0)

    End Sub

Finalmente no evento Click do botão - Gerar gráfico das vendas mensais - temos o código que irá processar os dados e gerar o gráfico.

Private Sub btnGeraGrafico_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnGeraGrafico.Click

        'calcula e converte os valores informados em cada mês

        Dim jan As Integer = CInt(Me.txtJan.Text) / 100

        Dim fev As Integer = CInt(Me.txtFev.Text) / 100

        Dim mar As Integer = CInt(Me.txtMar.Text) / 100

        Dim abr As Integer = CInt(Me.txtAbr.Text) / 100

        Dim mai As Integer = CInt(Me.txtMai.Text) / 100

        'Limpa o gráfico

        graficoArea.Clear(Me.BackColor)

        'desenha cada retângulo correspondente aos dados de cada mês

        graficoArea.DrawRectangle(New Pen(Color.Red), Me.txtJan.Left + 5, 280 - jan, 40, jan)

        graficoArea.DrawRectangle(New Pen(Color.Blue), Me.txtFev.Left + 5, 280 - fev, 40, fev)

        graficoArea.DrawRectangle(New Pen(Color.Magenda), Me.txtMar.Left + 5, 280 - mar, 40, mar)

        graficoArea.DrawRectangle(New Pen(Color.Brown), Me.txtAbr.Left + 5, 280 - abr, 40, abr)

        graficoArea.DrawRectangle(New Pen(Color.greem), Me.txtMai.Left + 5, 280 - mai, 40, mai)

        graficoArea.DrawRectangle(New Pen(Color.Black), 10, 280, Width - 30, 1)

        Invalidate()

    End Sub

o método DrawRectangle desenha um retângulo definido pelo par de coordenadas , uma largura e uma altura.

O método que iremos usar possui a seguinte assinatura: Graphics.DrawRectangle(Pen, Int32, Int32, Int32, Int32)

Overloads Public Sub DrawRectangle( _
   ByVal pen As Pen, _
   ByVal x As Integer, _
   ByVal y As Integer, _
   ByVal width As Integer, _
   ByVal height As Integer _
)

Onde:

pen - representa um objeto Pen que determina a cor , largura e estilo do retângulo.
x - a coordenada x do canto superior esquerdo do retângulo a ser desenhado
y - a coordenada y do canto superior esquerdo do retângulo a ser desenhado
width - Largura do retângulo
height - a altura do retângulo

Este método não retorna um valor.

Executando o programa e clicando no botão de comando teremos o gráfico exibido como abaixo:

Se você quiser dar um toque a mais e incrementar o gráfico use o método FillRectangle() que irá preencher o interior de um retângulo definido pelo par de coordenadas , altura e largura.

Private Sub btnGeraGrafico_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnGeraGrafico.Click

        Dim jan As Integer = CInt(Me.txtJan.Text) / 100

        Dim fev As Integer = CInt(Me.txtFev.Text) / 100

        Dim mar As Integer = CInt(Me.txtMar.Text) / 100

        Dim abr As Integer = CInt(Me.txtAbr.Text) / 100

        Dim mai As Integer = CInt(Me.txtMai.Text) / 100

        graficoArea.Clear(Me.BackColor)

        'usando o método FillRectangle par preencher os retângulos

        graficoArea.FillRectangle(New SolidBrush(Color.Red), Me.txtJan.Left + 5, 280 - jan, 40, jan)

        graficoArea.DrawRectangle(New Pen(Color.Red), Me.txtJan.Left + 5, 280 - jan, 40, jan)

        graficoArea.FillRectangle(New SolidBrush(Color.Blue), Me.txtFev.Left + 5, 280 - fev, 40, fev)

        graficoArea.DrawRectangle(New Pen(Color.Blue), Me.txtFev.Left + 5, 280 - fev, 40, fev)

        graficoArea.FillRectangle(New SolidBrush(Color.Magenta), Me.txtMar.Left + 5, 280 - mar, 40, mar)

        graficoArea.DrawRectangle(New Pen(Color.Magenta), Me.txtMar.Left + 5, 280 - mar, 40, mar)

        graficoArea.FillRectangle(New SolidBrush(Color.Brown), Me.txtAbr.Left + 5, 280 - abr, 40, abr)

        graficoArea.DrawRectangle(New Pen(Color.Brown), Me.txtAbr.Left + 5, 280 - abr, 40, abr)

        graficoArea.FillRectangle(New SolidBrush(Color.Green), Me.txtMai.Left + 5, 280 - mai, 40, mai)

        graficoArea.DrawRectangle(New Pen(Color.Green), Me.txtMai.Left + 5, 280 - mai, 40, mai)

        graficoArea.DrawRectangle(New Pen(Color.Black), 10, 280, Width - 30, 1)

        Invalidate()

    End Sub

O resultado exibido pela execução do programa será:

O programa não é lá muito útil , visto que os dados estão fixos no código; mas você pode incrementar o programa obtendo dados de uma base de dados. Como já disse em breve estarei dando um tratamento mais detalhado ao assunto.

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

José Carlos Macoratti