come si fa con questo codice
codice:
dim objGraph
Set objGraph = new Class_graph
call objGraph.init()
objGraph.length = 300 'pixel
objGraph.lines = 5 'linee del grafico (da 1 a 5)
objGraph.showLabels = true
call objGraph.addValue("test",50,25,100,3,50)
call objGraph.addValue("test2",100,90,37,50,17)
call objGraph.addValue("test3",75,110,35,20,12)
objGraph.direction = "vertical"
call objGraph.printGraph()
objGraph.direction = "horizontal"
call objGraph.printGraph()
a fare questo?

...
basta includere questo file...
codice:
<%
'WBgraph 0.1
'Simone Cingano (imente) Copyleft 2006
Class Class_graph
private graphArray()
public direction, showLabels, lines, length
public sub init()
redim graphArray(5,0)
end sub
public sub clear()
redim graphArray(5,0)
end sub
public sub addValue(argVal0, argVal1, argVal2, argVal3, argVal4, argVal5)
redim preserve graphArray(5,ubound(graphArray,2)+1)
graphArray(0,ubound(graphArray,2)) = argVal0
graphArray(1,ubound(graphArray,2)) = argVal1
graphArray(2,ubound(graphArray,2)) = argVal2
graphArray(3,ubound(graphArray,2)) = argVal3
graphArray(4,ubound(graphArray,2)) = argVal4
graphArray(5,ubound(graphArray,2)) = argVal5
end sub
public function getMaxValue()
dim tmpMaxValue
tmpMaxValue = clng(1)
dim ii, jj
for ii = 1 to ubound(graphArray,2)
for jj = 1 to lines
if clng(graphArray(jj,ii)) > clng(tmpMaxValue) then tmpMaxValue = clng(graphArray(jj,ii))
next
next
getMaxValue = tmpMaxValue
end function
public sub printGraph()
dim ii, jj
dim maxValue, finalValue
maxValue = getMaxValue()
if direction = "vertical" then
%><table class="graph-vert-box">
<tr><%
for ii = 1 to ubound(graphArray,2)%>
<td class="graph-vert-graph">
<% for jj = 1 to lines
finalValue = int((clng(length) * clng(graphArray(jj,ii)))/clng(maxValue))%>
<div class="graph-vert-graph<%=jj%>" style="height:<%=finalValue%>px;margin-top:<%=clng(length)-clng(finalValue)%>px;"></div><%
next %>
</td>
<% next %>
</tr>
<% if showLabels = true then %>
<tr><%
for ii = 1 to ubound(graphArray,2)%>
<td class="graph-vert-label"><%=graphArray(0,ii)%></td>
<% next %>
</tr>
<% end if %>
</table><%
else
%><table class="graph-hori-box"><%
for ii = 1 to ubound(graphArray,2)
%><tr>
<% if showLabels = true then %><td class="graph-hori-label"><%=graphArray(0,ii)%></td><% end if %>
<td class="graph-hori-graph"><%
for jj = 1 to lines
finalValue = int((clng(length) * clng(graphArray(jj,ii)))/clng(maxValue))
%><div class="graph-hori-graph<%=jj%>" style="width:<%=finalValue%>px;"></div>
<% next
%></td></tr>
<% next %>
</table><%
end if
end sub
end class
%>
e mettere questi stili nella vostra pagina
codice:
<style type="text/css">
table.graph-vert-box { border-left:1px solid #999999;border-collapse:collapse; margin:20px auto; padding:0; }
table.graph-vert-box td { border-right:1px solid #999999; vertical-align:middle; }
td.graph-vert-graph { border-left:1px solid #999999; padding:0 5px;}
div.graph-vert-graph1, div.graph-vert-graph2, div.graph-vert-graph3, div.graph-vert-graph4, div.graph-vert-graph5
{ width:10px; float:left; }
div.graph-vert-graph1 { background-color:#33A02C; }
div.graph-vert-graph2 { background-color:#FF5800; }
div.graph-vert-graph3 { background-color:#FFD000; }
div.graph-vert-graph4 { background-color:#0080C0; }
div.graph-vert-graph5 { background-color:#CF34BF; }
td.graph-vert-label { text-align:center; font-size:0.8em; padding:5px; }
table.graph-hori-box { border-top:1px solid #999999;border-collapse:collapse; padding:0; margin:20px auto; }
table.graph-hori-box td { border-bottom:1px solid #999999; height:30px; vertical-align:middle; }
div.graph-hori-graph1, div.graph-hori-graph2, div.graph-hori-graph3, div.graph-hori-graph4, div.graph-hori-graph5
{ height:10px; font-size:0px; }
div.graph-hori-graph1 { background-color:#33A02C; }
div.graph-hori-graph2 { background-color:#FF5800; }
div.graph-hori-graph3 { background-color:#FFD000; }
div.graph-hori-graph4 { background-color:#0080C0; }
div.graph-hori-graph5 { background-color:#CF34BF; }
td.graph-hori-graph { padding:5px 0;}
td.graph-hori-label { text-align:right; font-size:0.8em; padding:10px; }
</style>
---
note:
per definire dimensioni e colori editate gli stili
per quanto riguarda le dimensioni fa tutto da solo dato il LENGTH
se volete dare una dimensione fissa alla label impostate un WIDTH in GRAPH-XXX-LABEL
---
infine
questa è una piccola classe appena iniziata, ci sto lavorando sopra (per splik...) indi ci saranno a breve un po' di aggiornamenti
forse però già così serve a qualcuno...
inoltre i commenti fanno sempre piacere.
forse il codice è un po' approssimativo, ma l'ho scritta in una ventina di minuti :P
ciao a tutti...
IMENTE E' TORNATO