ASP.NET 2.0 - Gerando gráficos de barras e pizza

Este artigo mostra como gerar um gráfico de barras e um gráfico de pizza em páginas ASP.NET.

Em páginas ASP.NET a saída de um gráfico pode ser feita em uma superfície de desenho fornecida pela classe Bitmap. Portanto uma das primeiras tarefas que devemos realizar para gerar a saída do gráfico é criar um objeto Bitmap.

Ao criar o objeto devemos passar a largura e a altura da superfície como parâmetro no construtor da classe. Além disto devemos especificar o argumento do formato do pixel ("Pixel Format Argument") o qual indica se o formato será de cores 24-bits RGB, 32-bits RGB, GDI-colors , etc. Abaixo temos um exemplo de criação de um objeto Bitmap usando o construtor:

Dim Image As New Bitmap(500, 300, PixelFormat.Format32bppRgb)

Além disso , após ter criado o objeto Bitmap, você precisa obter o objeto Graphics que referencia o objeto Bitmap. O código a seguir pode ser usado para efetuar esta tarefa:

' Obtem o contexto gráfico para o bitmap.
Dim g As Graphics = Graphics.FromImage(Image)

O sistema de coordenadas X, Y é ilustrado na figura abaixo:

Após criar a sua superfície de desenho você vai precisar de uma caneta (pen) ou pincel (brush) para desenhar. Para criar uma caneta (pen) você deve definir algumas propriedades da caneta ou pincel , como cor e largura. Veja a seguir o código usado para realizar esta tarefa:

' Cria uma caneta vermelha para desenhar
Dim redPen As New Pen(Color.Red, 10)

' Cria um pincel azul
Dim blueBrush As New SolidBrush(Color.Blue)

Agora que você já tem a superfície e as ferramentas para começar a desenhar pode usar a classe Graphics que oferece um conjunto de métodos para desenhar objetos como: círculos, retângulos, textos, etc.:

Temos a seguir os métodos da classe Graphics que iremos usar neste artigo:

Nome do Método Descrição
Clear() Limpa o objeto graphics
DrawString() Usado para a saída de texto
FillPie() Desenha um pedaço de setor circular ( usado para gráfico de torta)
FillRectangle() Desenha um retângulo ( usado para gráfico de barras)
DrawLine() Desenha uma linha

Obs: Os métodos acima podem ser sobrecarregados , por isto usamos somente os nomes dos métodos sem os argumentos.

Lembre-se que como o eixo Y esta invertido teremos que efetuar alguns ajustes para poder gerar o gráfico de barras corretamente.

Criando um projeto ASP.NET para gerar gráficos de barras e pizza

Vamos supor que você queira criar um gráfico de vendas mensais da sua empresa e exibi-los em uma página ASP.NET da usa intranet.

Abra o Visual Web Developer 2005 Express Edition (VWD) e crie um novo web site (opção File->New Web Site) chamado graficosNet.

Selecione a página Default.aspx e no modo design inclua dois botões de comando conforme a imagem abaixo:

A seguir selecione o arquivo default.aspx.vb e defina os seguintes namespaces no projeto:

Imports System.Drawing
Imports System.Drawing.Imaging

A seguir vamos declarar as variáveis usando o recurso Region apenas para estruturar o código do projeto. Ao final a visão que teremos é a seguinte:

A Region "variaveis" é onde iremos declarar as variáveis do projeto:

#Region "variaveis"

' declaração de variáveis
Private mImagem As Bitmap
Private g As Graphics
Private vendas() As Integer = {100, 60, 250, 80, 120, 150}
Private meses() As String = {"Jan", "Fev", "Mar", "Abr", "Mai", "Jun"}
Private mBrushes(6) As Brush

#End Region

Neste código o array vendas() contém os valores das vendas mensais já ajustados a escala do gráfico (divididos por 10000); o array meses() contém os nomes de cada mês referente as vendas. Definimos também 6 objetos do tipo Brush , um para cada cor que vamos usar para desenhar o gráfico.

A Region "metodos" refere-se a definição dos métodos usados no projeto, onde temos:

#Region "metodos"
'inicia o bitmap, o contexto gráfico e pens para desenho
Private Sub inicializaAmbienteGrafico()
Try
' Cria um bitmap na memoria onde vamos desenhar a imagem
' O BitMap possui uma largura de 700 pixels e altura de 400 pixels (Esta é a área do gráfico a ser usada)
mImagem = New Bitmap(700, 400, PixelFormat.Format32bppRgb)

' Obtem o conexto gráfico para o bitmap.
g = Graphics.FromImage(mImagem)

' Cria as brushes para desenho
criaBrushes()
Catch ex As Exception
Throw ex
End Try
End Sub

' Nétodo para criar as brushes para cores especificas
Private Sub criaBrushes()
Try
mBrushes(0) = New SolidBrush(Color.Red)
mBrushes(1) = New SolidBrush(Color.Blue)
mBrushes(2) = New SolidBrush(Color.Yellow)
mBrushes(3) = New SolidBrush(Color.Green)
mBrushes(4) = New SolidBrush(Color.Beige)
mBrushes(5) = New SolidBrush(Color.Cyan)
Catch ex As Exception
Throw ex
End Try
End Sub

' Desenha o grafico de barras
Private Sub graficoBarras(ByVal g As Graphics)
Try
' declara variaveis

Dim i As Integer
Dim xInterval As Integer = 100
Dim width As Integer = 90
Dim height As Integer
Dim blackBrush As New SolidBrush(Color.Black)

For i = 0 To vendas.Length - 1
height = vendas(i)

' Desenha o grafico de barras usando as cores
g.FillRectangle(mBrushes(i), xInterval * i + 50, 280 - height, width, height)

' usa as etiquetas para o grafico
g.DrawString(meses(i), New Font("Verdana", 12, FontStyle.Bold), Brushes.Black, xInterval * i + 50 + (width / 3), 280 - height - 25)

' Desenha a escala
g.DrawString(height, New Font("Verdana", 8, FontStyle.Bold), Brushes.Black, 0, 280 - height)

' Desenha os eixos
g.DrawLine(Pens.Brown, 40, 10, 40, 390) ' eixo- y
g.DrawLine(Pens.Brown, 20, 280, 690, 280) ' eixo-x
Next
Catch ex As Exception
   Throw ex
End Try
End Sub

' desenha o grafico de pizza
Private Sub graficoPizza(ByVal g As Graphics)
Try
' declara as variaveis
Dim i As Integer
Dim total As Integer
Dim percentage As Double
Dim angleSoFar As Double = 0.0

' Calcula o total
For i = 0 To vendas.Length - 1
total += vendas(i)
Next

' Desenha o grafico de barras
For i = 0 To vendas.Length - 1
percentage = vendas(i) / total * 360

g.FillPie(mBrushes(i), 25, 25, 250, 250, CInt(angleSoFar), CInt(percentage))

angleSoFar += percentage

' Desenha a legenda
g.FillRectangle(mBrushes(i), 350, 25 + (i * 50), 25, 25)

' Etiqueta dos meses
g.DrawString("Mes " & meses(i), New Font("Verdana", 8, FontStyle.Bold), Brushes.Brown, 390, 25 + (i * 50) + 10)
Next
Catch ex As Exception
Throw ex
End Try
End Sub
#End Region

Na Region "eventos" temos o codigo dos eventos dos botões de comando definidos na página Default.aspx:

#Region "Eventos"
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
' Inicia o ambiente
inicializaAmbienteGrafico()
End Sub
Protected Sub btnGBarras_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnGBarras.Click
Try
' Define a cor de fundo
g.Clear(Color.WhiteSmoke)

'desenha o grafico de barras
graficoBarras(g)

' Renderiza a imagem para a saida HTML stream
mImagem.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg)
Catch ex As Exception
Throw ex
End Try
End Sub
Protected Sub btnGPizza_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnGPizza.Click
Try
' Defina a cor de fundo
g.Clear(Color.WhiteSmoke)

' desenha o grafico
graficoPizza(g)

' Renderiza a imagem para a saida HTML stream
mImagem.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg)
Catch ex As Exception
Throw ex
End Try
End Sub
#End Region

Como o código esta todo comentado vou partir para a execução do projeto para ver o resultado prático:

1- O gráfico de pizza

2- O gráfico de barras

Uma das melhorias que você pode promover no projeto é permitir a geração de gráficos a partir de uma fonte de dados como um dataset ou datatable.(Lembre-se em ajustar a área da imagem usada para gerar o gráfico)

Pegue o projeto completo aqui :graficosNet.zip

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