|
|
|
|
|
|
|
|
Dicas
|
|
|
ASP - Active Server Page (Miscelâneas)
|
|
 |
Título da Dica: Criação de Gráficos em tempo real usando uma Applet
|
 |
|
|
|
Postada em 23/10/2003 por ^HEAVY-METAL^
A BASE DE DADOS :
Esta é do mais básico possível, servindo apenas de base para a informação que queremos usar de forma a gerarmos gràficos com um mínimo de aspecto estatístico possível.
O ficheiro da base de dados chama-se dados.mdb, e com otem vindo a ser habitual é feito em MSAccess devido à sua portabilidade e facilidade de manuseamento.
Existe uma única tabela com a seguinte estrutura :
Tabela : dados
id_dados AutoNumber
quote_dados Text
valor_dados Number
datahora_dados Date/Time
O auto-number uso sempre para que no futuro tenha garantido um código único para todos os meus registos, o quote vai funcionar como um código, referente neste exemplo, a uma linguagem de programação internet, como as ASP, PHP, PERL etc. O valor serà um numero que pode ser olhado como uma 'pontuação' que damos numa determinada hora à linguagem escolhida, e por isso termos o campo datahora_dados. Claro que o ideal era o campo quote_dados ser uma ligação a outra tabela onde estão todos os tipos de quote, mas neste momento a ideia é demonstrar o uso da Applet de gráficos.
Temos então 3 ficheiros, um é o Chart.jar que contém as classes necessàrias para a geração dos gráficos, o dados.mdb que jà referi, e o ficheiro onde se passa toda a programação ASP em graficos.asp.
Queria frisar que o Applet gráfico não é gratuito, mas que se pode usar mesmo sem pagar, a diferença é que se não pagar uma licença vai ter um pequeno quadrado amarelo no fundo de cada gráfico que dispara um pequeno banner sobre a empresa do mesmo onde està o link deste produto www.objectplanet.com/EasyCharts/ . Neste artigo estou só a usar tipo 30% das potencialidades desta Applet, cuja não é muito cara se tiver a criar um site comercial, onde a diferença por este produto não farà o seu cliente recusar um trabalho seu.
Podemos ver desde jà o resultado deste artigo...
... e agora podemos então passar a explicar o código que foi criado para o efeito.
ficheiro : graficos.ASP
<%
'uso o explicit para que o código esteja mais bem organizado
'e para que não comece a criar variàveis que depois deixam de
'ser usadas, e comecem a interferir na performance do site
Option Explicit
'definimos a variável para a conecção à base de dados
Dim Conn
'inicializamos o recordset para puxarmos a informação da BD
Dim RS
' a vari`vel que vai guardar as declarações de SQL a usar
Dim SQLStmt
'esta variàvel vai servir de suporte para guardar os dados a usar
Dim os_dados
'definimos Conn como um objecto para uso com a BD
Set Conn=Server.CreateObject("ADODB.Connection")
'fazemos a conecção à BDConn.Open "PROVIDER=MSDASQL;" & _
"DRIVER={Microsoft Access Driver (*.mdb)}; " & _
"DBQ=" & server.mappath("dados.mdb")
'definimos outro objecto para o Recordset
Set RS = Server.CreateObject("ADODB.Recordset")
'esta primeira função serve para criar uma espécie de array'
'com todos os valores de um quote
Function sacar_dados(quote)
'inicializamos a variável os_dados como vazia pois esta função serà
'usada mais que uma vez
os_dados = ""
'criamos a declaração de SQL
SQLStmt = "SELECT * FROM dados where quote_dados='" & quote & "'"
SQLStmt = SQLStmt & SQLStmt & " ORDER BY datahora_dados"
'executamos a declaração para obtermos a informação pretendida
'da nossa base de dados
Set Rs=Conn.Execute(SQLStmt)
'fazemos o loop para agarrarmos em todas as linhas devolvidas
While NOT RS.EOF
construimos o 'array' de valores do quote
os_dados = os_dados & RS("valor_dados") & ","
RS.MoveNext
Wend
'aqui retiramos a última virgula de todo o array que fica por defeito
os_dados = Left(os_dados,Len(os_dados)-1)
'fechamos o Recordset
RS.Close
'devolvemos a informação obtida e tratada
sacar_dados = os_dados
End Function
'esta outra função serve para gráficos que usam um só valor
Function sacar_totais(quote)
'a declaração de SQL
SQLStmt = "SELECT SUM(valor_dados) AS total FROM dados where "
SQLStmt = SQLStmt & "quote_dados='" & quote & "'"
Set Rs=Conn.Execute(SQLStmt)
'se for devolvido algum valor vamos buscá-lo
If NOT RS.EOF then
sacar_totais = RS("total")
End If
RS.Close
End Function
'Aqui vamos criar o código HTML que carrega a Applet com os dados
'com os dados que carregamos da Base de Dados
'pelo resultado podemos verificar que se trata de um gráfico de linhas
response.write "<APPLET code=""com.objectplanet.chart.LineChartApplet"" archive=""chart.jar"" width=250 height=180 VIEWASTEXT>" & VbNewLine
response.write "<param name=""seriesCount"" value=5>" & VbNewLine
response.write "<PARAM name=seriesLabels value=""ASP, JSP, PHP, PERL, CF"">" & VbNewLine
'vamos usar a função sacar_dados() para obtermos os valores de
'cada quote/linguagem
response.write "<param name=""series0_values"" value=""" & sacar_dados("ASP") & """>" & VbNewLine
response.write "<param name=""series1_values"" value=""" & sacar_dados("JSP") & """>" & VbNewLine
response.write "<param name=""series2_values"" value=""" & sacar_dados("PHP") & """>" & VbNewLine
response.write "<param name=""series3_values"" value=""" & sacar_dados("PERL") & """>" & VbNewLine
response.write "<param name=""series4_values"" value=""" & sacar_dados("CF") & """>" & VbNewLine
'podemos na Applet definir o alcance màximo dos valores
response.write "<PARAM name=range value=60>" & VbNewLine
'a unidade de medida para o gráfico também é costumizável
response.write "<PARAM name=rangeDecimalCount value=1>" & VbNewLine
'podemos indicar o título da imagem
response.write "<PARAM name=title value=""Grafico de Linhas"">" & VbNewLine
response.write "<PARAM name=titleOn value=""true"">" & VbNewLine
response.write "<PARAM name=legendOn value=true>" & VbNewLine
response.write "<PARAM name=legendPosition value=right>" & VbNewLine
response.write "<PARAM name=valueLinesOn value=true>" & VbNewLine
response.write "<PARAM name=sampleLabelsOn value=true>" & VbNewLine
'definir a cor de fundo é uma das opções possíveis
response.write "<PARAM name=background value=lightgray>" & VbNewLine
response.write "<PARAM name=foreground value=black>" & VbNewLine
response.write "<PARAM name=chartBackground value=white>" & VbNewLine
response.write "<PARAM name=chartForeground value=black>" & VbNewLine
response.write "<PARAM name=valueLinesColor value=lightgray>" & VbNewLine
'definir as cores das linhas do gráfico são possíveis com o método
'sampleColors
response.write "<PARAM name=sampleColors value=""orange, red, magenta, blue, green"">" & VbNewLine
response.write "</applet>" & VbNewLine
'depois do gráfico de linhas vamos criar um gráfico de barras em 3D
'jà não construimos um arrai de valores e por isso só nos interessa
~valores totais para a construção do mesmo
response.write "<APPLET code=""com.objectplanet.chart.BarChartApplet"" archive=""chart.jar"" width=250 height=180 VIEWASTEXT>" & VbNewLine
response.write "<param name=sampleCount value=5>" & VbNewLine
'os valores a ir buscar aqui são jà totais devido ao tipo de gráfico, e
'por isso jà não usamos a mesma função.
response.write "<PARAM name=sampleValues value=""" & sacar_totais("ASP") & ", " & sacar_totais("JSP") & ", " & sacar_totais("PHP") & ", " & sacar_totais("PERL") & ", " & sacar_totais("CF") & """>" & VbNewLine
response.write "<PARAM name=sampleLabels value=""ASP, JSP, PHP, PERL, CF"">" & VbNewLine
response.write "<PARAM name=range value=500>" & VbNewLine
response.write "<PARAM name=title value=""Grafico de Barras 3D"">" & VbNewLine
response.write "<PARAM name=range value=500>" & VbNewLine
response.write "<PARAM name=lowerRange value=0>" & VbNewLine
response.write "<PARAM name=sampleDecimalCount value=1>" & VbNewLine
response.write "<PARAM name=rangeDecimalCount value=1>" & VbNewLine
response.write "<PARAM name=titleOn value=true>" & VbNewLine
response.write "<PARAM name=legendOn value=true>" & VbNewLine
response.write "<PARAM name=legendPosition value=right>" & VbNewLine
response.write "<PARAM name=valueLabelsOn value=true>" & VbNewLine
response.write "<PARAM name=valueLinesOn value=true>" & VbNewLine
response.write "<PARAM name=multiColorOn value=true>" & VbNewLine
response.write "<PARAM name=barLabelsOn value=true>" & VbNewLine
response.write "<PARAM name=barAlignment value=vertical>" & VbNewLine
response.write "<PARAM name=3DModeOn value=true>" & VbNewLine
response.write "<PARAM name=frameOn value=false>" & VbNewLine
response.write "<PARAM name=background value=""200,200,200"">" & VbNewLine
response.write "<PARAM name=foreground value=black>" & VbNewLine
response.write "<PARAM name=chartBackground value=""#ffffff"">" & VbNewLine
response.write "<PARAM name=chartForeground value=black>" & VbNewLine
response.write "<PARAM name=sampleColors value=""red, green, blue, orange, gray"">" & VbNewLine
response.write "</APPLET>" & VbNewLine
'este último gráfico tipo ´queijo' é muito idêntico ao de barras 3D
response.write "<APPLET code=""com.objectplanet.chart.PieChartApplet"" archive=""chart.jar"" width=250 height=180 VIEWASTEXT>" & VbNewLine
response.write "<param name=sampleCount value=5>" & VbNewLine
response.write "<PARAM name=sampleValues value=""" & sacar_totais("ASP") & ", " & sacar_totais("JSP") & ", " & sacar_totais("PHP") & ", " & sacar_totais("PERL") & ", " & sacar_totais("CF") & """>" & VbNewLine
response.write "<PARAM name=sampleLabels value=""ASP, JSP, PHP, PERL, CF"">" & VbNewLine
response.write "<PARAM name=range value=500>" & VbNewLine
response.write "<PARAM name=title value=""Grafico de Barras 3D"">" & VbNewLine
response.write "<PARAM name=range value=500>" & VbNewLine
response.write "<PARAM name=lowerRange value=0>" & VbNewLine
response.write "<PARAM name=sampleDecimalCount value=1>" & VbNewLine
response.write "<PARAM name=rangeDecimalCount value=1>" & VbNewLine
response.write "<PARAM name=titleOn value=true>" & VbNewLine
response.write "<PARAM name=legendOn value=true>" & VbNewLine
response.write "<PARAM name=legendPosition value=right>" & VbNewLine
response.write "<PARAM name=valueLabelsOn value=true>" & VbNewLine
response.write "<PARAM name=valueLinesOn value=true>" & VbNewLine
response.write "<PARAM name=multiColorOn value=true>" & VbNewLine
response.write "<PARAM name=barLabelsOn value=true>" & VbNewLine
response.write "<PARAM name=barAlignment value=vertical>" & VbNewLine
response.write "<PARAM name=3DModeOn value=true>" & VbNewLine
response.write "<PARAM name=frameOn value=false>" & VbNewLine
response.write "<PARAM name=background value=""200,200,200"">" & VbNewLine
response.write "<PARAM name=foreground value=black>" & VbNewLine
response.write "<PARAM name=chartBackground value=""#ffffff"">" & VbNewLine
response.write "<PARAM name=chartForeground value=black>" & VbNewLine
response.write "<PARAM name=sampleColors value=""red, green, blue, orange, gray"">" & VbNewLine
response.write "</APPLET>" & VbNewLine
%>
As hipóteses desta Applet são imensas, vale a pena ir ver ao site da mesma, outra coisa que pode fazer desde jà quando tiver este código a correr, é clicar com o rato sobre os títulos das linguagens que estão nas legendas, um a um e ver as alterações que acontecem.
T+,
|
|
|
|
|
