ASP – Gráficos de barras

[fernandosena]

Mais uma técnica para mostrar gráficos de barras usando apenas HTML. Ele também garante que ele irá exibir corretamente para qualquer navegador que suporta tabelas.

Primeiro vou apresentar um gráfico de barras estáticas, com pontos de dados a serem plotado, podemos recuperar as informações de um banco de dados para preencher dinamicamente o gráfico de barras.

Vamos iniciar um exemplo mais simples de duas:

<%@ %>
<% Option Explicit %>

Usando o Option Explicit, para otimizar o código, essa instrução força a declaração (com Dim, Private, Public ou ReDim) de todas as variáveis usadas no script, antes de serem utilizadas.
Deve ser colocado no script antes de qualquer outra instrução. Qualquer tentativa de usar uma variável não declarada ocasionará um erro. A declaração de variáveis antes de usá-las faz com que o script seja executado mais rapidamente.

Agora, queremos definir algumas constantes que irá afetar a forma como o gráfico é exibido. Essas constantes são a altura do gráfico em pixels, a largura do gráfico em pixels, e o nome da imagem que será as barras do gráfico. Neste exemplo, foi uma criado uma imagem de 20 pixels de largura e 5 pixels de altura, chamada bluebar.gif, voê pode criar uma barra de dimensão semelhante, com a cor que desejar.

<%
‘Quantos pixels de altura / largura queremos que o nosso gráfico de barras
Const graphHeight = 300
Const graphWidth = 450

'caminho da imagem bar
Const barImage = "/images/bluebar.gif"

Agora estamos prontos para escrever a nossa sub-rotina que irá exibir o gráfico de barras. A sub-rotina é chamada BarChart e leva quatro parâmetros:

- data: um array de dimensão de todos os pontos de dados (começa em 0)
- labels: um array de dimensão de todas as etiquetas para as barras (começa em 0, deve ser do mesmo tamanho que a matriz de dados)
- title: uma string; o título que deseja na barra do gráfico
- axislabel – uma string; o título que você deseja para suas etiquetas

Basicamente, estamos indo para exibir uma tabela que tem n +1 colunas, onde n é igual array. Em cada coluna, exceto para a primeira, vamos fazer uma <IMG SRC…> com uma altura proporcional ao valor do datapoint atual no array.

sub BarChart(data, labels, title, axislabel)

'Exibe título(heading)

Response.Write(“<TABLE CELLSPACING=0 CELLPADDING=1 BORDER=0″)
Response.Write(” WIDTH=” & graphWidth & “>” & chr(13))
Response.Write(“<TR><TH COLSPAN=” & UBound(data) – LBound(data) + 2)
Response.Write(“>”)
Response.Write(“<FONT SIZE=+2>” & title & “</FONT></TH></TR>”
Response.Write(“<TR><TD VALIGN=TOP ALIGN=RIGHT>” & chr(13))

‘Encontrar o maior valor

Dim hi, low

hi = data(LBound(data))
Dim i
for i = LBound(data) to UBound(data)
if data(i) > hi then hi = data(i)
next

‘Exibe o maior valor no topo do gráfico

Response.Write(hi & “</TD>”)
Dim widthpercent
widthpercent = CInt((1 / (UBound(data) – LBound(data) + 1)) * 100)
For i = LBound(data) to UBound(data)
Response.Write(” <TD VALIGN=BOTTOM ROWSPAN=2 WIDTH=”
Response.Write(widthpercent & “% >” & chr(13))
Response.Write(“ <IMG SRC=”"” & barImage & “”" WIDTH=100% “)
Response.Write(“HEIGHT=” & CInt(data(i)/hi * graphHeight) & “>”)
Response.Write(chr(13))
Response.Write(” </TD>” & chr(13))
Next

Response.Write(“</TR>”)
Response.Write(“<TR><TD VALIGN=BOTTOM ALIGN=RIGH>>0</TD></TR>”)

‘rodapé /labels

Response.Write(“<TR><TD ALIGN=RIGHT VALIGN=BOTTOM>”)
Response.Write(axislabel & “</TD>” & chr(13))
for i = LBound(labels) to UBound(labels)
Response.Write(“<TD VALIGN=BOTTOM ALIGN=CENTER>” & labels(i))
Response.Write(“</TD>” & chr(13))
next

Response.Write(“</TR>” & chr(13))
Response.Write(“</TABLE>”)
end sub
%>

Antes de podermos chamar a subrotina, precisamos criar e inicializar os dados do array. Aqui estão alguns valores aleatórios em ambos os arrays:

Dim dataArray(10)
dataArray(0) = 8
dataArray(1) = 10
dataArray(2) = 8
dataArray(3) = 14
dataArray(4) = 6
dataArray(5) = 13
dataArray(6) = 7
dataArray(7) = 11
dataArray( = 8
dataArray(9) = 9

Dim labelArray(10)
labelArray(0) = "3/2"
labelArray(1) = "3/3"
labelArray(2) = "3/4"
labelArray(3) = "3/5"
labelArray(4) = "3/6"
labelArray(5) = "3/7"
labelArray(6) = "3/8"
labelArray(7) = "3/9"
labelArray( = "3/10"
labelArray(9) = "3/11"

%>
Agora, para mostrar o gráfico, dentro das tags HTML, só precisamos chamar a função BarChart passar os dados do arrays rótulo, bem como o título do gráfico de barras e os rótulos dos eixos.

Aqui está um exemplo:

<HTML>
<BODY>
<% BarChar dataArray, labelArray, “Vendas Telefone”, “Data”%>
</ BODY>
</ HTML>