Olá pessoal, tudo bem? Espero que as dicas e orientações que eu for disponibilizando aqui no iMasters possa ajudar no desenvolvimento profissional de vocês.
Como primeiro artigo, vou mostrar um exemplo de gráfico criado com o componente do Office, o OWC (Office Web Components). Esse componente está disponível no cd de instalação do Microsoft Office. Basta instalar o arquivo OWC10.MSI ou OWC11.MSI.
Descrição: Viabilizando modelo de consulta através de gráficos.
Cenário: Empresa apresenta evolução dos indicadores comerciais através de gráficos criados a partir de planilhas eletrônicas. Criar ferramenta para visualização das informações através da própria intranet.
Esse é um caso típico da utilização de relatórios em empresas que tem intranet: a possibilidade de acessar as informações a qualquer hora e de qualquer máquina lotada na rede corporativa.
Nosso modelo permitirá a consulta a dados e a formatação do relatório pronto para visualização ou impressão.
1ª parte – Construção do banco de dados.
Para o nosso exemplo, para ficar mais simples, utilizaremos o bom e velho ACCESS.
Veja como construí as tabelas:
E a consulta:
Finalizamos a primeira etapa!!!
2ª parte – Formulário para seleção de gráfico.
Construiremos agora a página de acesso a consulta ao banco de dados para exibição do gráfico.
Veja o layout:
Vamos ao código (default.asp)!!!
<html>
<head><title>MODELO DE GRÁFICO | BY: RICARELA.COM</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"></head>
<body BGCOLOR="#FFFFFF">
<%
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
'define variáveis
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
dim pdTpValue, sql, slCombo
slCombo = (request.form("selProd"))
pdTpValue = slCombo
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
'define conexão com o banco
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
Set Cn = Server.CreateObject("ADODB.Connection")
Sub abre
Cn.provider="Microsoft.Jet.OLEDB.4.0"
Cn.connectionstring=Server.Mappath("\imaster.com.br\publica001\bancoUm.mdb")
Cn.open
End Sub
Sub fecha
cn.close
Set cn = nothing
End Sub
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
'abre conexão
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
call abre
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
'seleciona registros e monta formulário
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
sqlForm = "select distinct pdTp, pdDescription from cnsSales "
Set rsSQLForm = cn.Execute(sqlForm)
%>
<form name="form" action="default.asp" method="post">
<table>
<tr>
<td>Selecione o produto:</td>
<td>
<select name="selProd" size="1" onchange="form.submit();">
<%while not rsSQLForm.eof%>
<option <%if slCombo = cStr(rsSQLForm("pdTp")) then response.write "selected"%> value=<%=rsSQLForm("pdTp")%>><%=rsSQLForm("pdDescription")%></option>
<%
rsSQLForm.movenext
wend
%>
</select>
</td>
</tr>
</table>
</form>
<%
if slCombo <> "" then
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
'seleciona registros e monta tabela
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
sql = "select pdTp, pdDescription, slQtSale, slRef from cnsSales " & _
"where pdTp = " & pdTpValue
Set rsSQL = cn.Execute(sql)
%>
<table border=1>
<tr>
<td>DESCRIÇÃO DO PRODUTO</td>
<td>QUANTIDADE VENDIDA</td>
<td>ANO|MÊS DE REFERÊNCIA</td>
</tr>
<%while not rsSQL.eof%>
<tr>
<td align="center"><%=rsSQL("pdDescription")%></td>
<td align="center"><%=rsSQL("slQtSale")%></td>
<td align="center"><%=MudaData(rsSQL("slRef"))%></td>
</tr>
<%
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
'prepara gráfico
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
gRefe = gRefe & MudaData(rsSQL("slRef")) & ";"
gSale = gSale & rsSQL("slQtSale") & "|"
gDesc = rsSQL("pdDescription")
rsSQL.movenext
wend
%>
</table>
<%
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
'chama gráfico
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%>
<p align="center">
<img border = 0 src="grafico.asp?gRefe=<%=gRefe%>&gSale=<%=gSale%>&gDesc=<%=gDesc%>">
</p>
<%
end if
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
'fecha conexão com o banco e destrói objetos
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
call fecha
set rsSQL = nothing
set rsSQLForm = nothing
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
'função para mudar apresentação ano|mês
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
Function MudaData(string)
fMes = VerMes(right(string,2))
fAno = mid(string,3,2)
MudaData = fMes & "|" & fAno' & " " & fAno
End Function
Function VerMes(string)
select case string
case "01"
VerMes = "Jan"
case "02"
VerMes = "Fev"
case "03"
VerMes = "Mar"
case "04"
VerMes = "Abr"
case "05"
VerMes = "Mai"
case "06"
VerMes = "Jun"
case "07"
VerMes = "Jul"
case "08"
VerMes = "Ago"
case "09"
VerMes = "Set"
case "10"
VerMes = "Out"
case "11"
VerMes = "Nov"
case "12"
VerMes = "Dez"
end select
End Function
%>Com o formulário criado, vamos criar a página do gráfico (grafico.asp)!
<%
Session.LCID = 1046
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
'declara variáveis
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
dim gDesc, gRefeDim, gSaleDim
gDesc = request.querystring("gDesc")
gRefeDim = Split(request.querystring("gRefe"), ";")
gSaleDim = Split(request.querystring("gSale"), "|")
redim gRefe(uBound(gRefeDim)-1)
redim gSale(uBound(gSaleDim)-1)
for i = 0 to uBound(gRefeDim) - 1
gRefe(i) = gRefeDim(i)
gSale(i) = gSaleDim(i)
next
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
'gera gráfico
'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
set oChart = CreateObject("OWC11.ChartSpace")
set c = oChart.Constants
oChart.Border.Color = c.chColorNone 'borda
with oChart
.Charts.Add
.Charts(0).Type = 0
.ChartLayout = c.chChartLayoutHorizontal
.Charts(0).HasTitle = True
.Charts(0).Axes(0).Font.Size = 7
.Charts(0).Axes(0).Font.Name = "MS SAN SERIF"
.Charts(0).Axes(1).HasTitle = true
.Charts(0).Axes(1).Title.Font.Size = 7
.Charts(0).Axes(1).Title.Font.Name = "Tahoma"
.Charts(0).Axes(1).Font.Size = 7
.Charts(0).Axes(1).Font.Name = "Tahoma"
.Charts(0).Axes(1).Title.Caption = "Quantidade"
.Charts(0).Title.Font.Name = "Arial"
.Charts(0).Title.Font.Size = 10
.Charts(0).Title.Font.Bold = true
.Charts(0).Axes(c.chAxisPositionValue).MajorGridlines.Line.Color = "Black"
.Charts(0).Title.Caption = ucase(mensagem)
.Charts(0).PlotArea.Interior.Color = "#ffffff"
'lelgenda
.Charts(0).HasLegend = true 'legenda
.Charts(0).Legend.Position = 2 'posiciona legenda na parte inferior
.Charts(0).Legend.Font.Name = "tahoma"
.Charts(0).Legend.Font.Size = 7
.Charts(0).Legend.Border.Color = c.chColorNone 'borda
'Adiciona o gráfico de colunas (Sales)
i = 0
.Charts(0).SeriesCollection.Add
.Charts(0).SeriesCollection(i).SetData c.chDimCategories, c.chDataLiteral, gRefe
.Charts(0).SeriesCollection(i).Caption = gDesc
.Charts(0).SeriesCollection(i).SetData c.chDimValues, c.chDataLiteral, gSale
.Charts(0).SeriesCollection(i).interior.Color = "#09B900"
.Charts(0).SeriesCollection(i).DataLabelsCollection.Add
.Charts(0).SeriesCollection(i).DataLabelsCollection(0).Font = "Estrangelo Edessa"
.Charts(0).SeriesCollection(i).DataLabelsCollection(0).Font.Bold = false
.Charts(0).SeriesCollection(i).DataLabelsCollection(0).Font.Size = 7
.Charts(0).SeriesCollection(0).DataLabelsCollection(0).NumberFormat = "#,##0"
end with
Response.Expires = 0
Response.Buffer = true
Response.Clear
Response.ContentType = "image/png"
Response.BinaryWrite oChart.GetPicture("png",700, 480)
set oChart = nothing
%>Usem a criatividade para explorar ao máximo deste exemplo!
Qualquer coisa é só entrar em contato! Grande Abraço.
Faça o download do exemplo deste artigo.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?