wbgraph - creare grafici

[imente]

come si fa con questo 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...

<%

'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

<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

[santino83_11_04]

sei sempre un mito...

mi spieghi questo:

public sub clear()
		redim graphArray(5,0)
	end sub

? perchè invece di fare il redim non distruggi l'array?

[imente]

ho fra l'altro già cambiato il nome alla sub...

non serve a chiudere la baracca, ma a preparare l'oggetto per accettare nuovi dati (dopo aver stampato il grafico)

---

domani oltre a un aggiornamento (pulizia codice + valori indicativi dinamici a lato degli assi) anche una miniguida per chiarire questi ed altri possibili punti oscuri

[imente]

tanto per dare un'idea di prodotto finito...

ecco come ho utilizzato la classe per splik (con le ultime modifiche)

http://forum.imente.org/statistics.asp

domani sera pubblico il nuovo codice sorgente

[imente]

sono stanchissimo, appena tornato da lavoro
lavoro e pubblico domani in giornata :P

[imente]

ecco a voi WBgraph 0.3



questo è il codice che genera questa pagina

<%
dim objGraph							'CREA L'OGGETTO WBGRAPH
Set objGraph = new Class_graph

call objGraph.init()						'INIZIALIZZA LA CLASSE

objGraph.direction = "vertical"					'INDICA L'ORIENTAMENTO DEL GRAFICO
objGraph.lines = 5						'LINEE DA VISUALIZZARE
objGraph.length = 300						'DIMENSIONI DEL GRAFICO
objGraph.showLabels = true					'VISUALIZZA LABEL
objGraph.showIndicators = true					'VISUALIZZA QUOTE
objGraph.indicators = 10					'NUMERO DI QUOTE
call objGraph.setStyle(0,"barRightBorderColor","#32578F")	'IMPOSTA BORDO DESTRO DELLE BARRE
call objGraph.setStyle(0,"barLeftBorderColor","#EEF2F9")	'IMPOSTA BORDO SINISTRO DELLE BARRE
%>
<html>
<head>
<title>WBGraph Test Page</title><%
call objGraph.printStyle()					'STAMPA GLI STILI (solitamente nella head)
%></head>
<body><%
call objGraph.addValue("test",27,32,5,27,40)			'AGGIUNGE I VALORI E LE LABEL
call objGraph.addValue("test2",86,34,39,18,90)
call objGraph.addValue("test3",73,31,78,66,12)
call objGraph.addValue("test4",28,10,21,18,84)

call objGraph.printGraph()					'STAMPA IL GRAFICO

objGraph.direction = "horizontal"				'MODIFICA L'ORIENTAMENTO
call objGraph.printGraph()					'RISTAMPA IL GRAFICO CON IL NUOVO ORIENTAMENTO

%></body></html>

-------------------------------------------------------------------------------------

trovate codice sorgente di classe ed esempio qui
http://www.splik.org/bsplik/pills/wbgraph.zip

-------------------------------------------------------------------------------------

come si utilizza wbgraph
dopo aver istanziato e inizializzato la classe (prime 3 righe) si può cominciare a impostare il tipo di grafico

direction proprietà (read/write)
indica la direzione in cui sarà orientato il grafico.
[possibili valori "vertical" o "horizontal"]

lines proprietà (read/write)
indica il numero di barre che verranno visualizzate (a prescindere dai valori immessi)
il valore può variare fra 1 e 5
ciò rappresenta il numero di barre per ogni "record" inserito
[numero puro]

length proprietà (read/write)
indica la dimensione del grafico
nel caso di un grafico orizzontale rappresenta la height e nel caso di un grafico verticale la width
[si indica in PIXEL senza unità di misura]

showLabels proprietà (read/write)
indica se debbono o meno essere visualizzate le labels
[valore booleano]

showIndicators proprietà (read/write)
indica se debbono o meno essere visualizzate le quote accanto all'asse.
[valore booleano]

indicators proprietà (read/write)
rappresenta il numero degli indicatori che devono essere posizionati sull'asse (di lunghezza LENGTH)
si consiglia di immettere un numero che sia divisore intero della proprietà LENGTH
es: length = 300 --> indicators = 10
es: length = 495 --> indicators = 15
altrimenti i valori non interi della divisione creano un leggero sfasamento degli indicatori
[valore intero]

setStyle(bar, type, value) metodo
bar: indica su quale barra si applica lo stile. si può indicare una singola barra (1,2,3,4,5) oppure tutte le barre (0)
type: indica il tipo di stile da applicare ("barRightBorderColor", "barLeftBorderColor", "barColor", "barThickness"). il colore bordo destro e sinistro della barra, il colore della barra e la dimensione della barra (width se grafico verticale, height se grafico orizzontale, in pixel senza unità di misura)
value: il valore.

printStyle() metodo
stampa gli stili (da eseguire dopo tutti i setStyle).
preferibilmente da effettuarsi nella HEAD del documento

setValue(label, bar1, bar2, bar3, bar4, bar5) metodo
imposta un valore. il primo argomento è la label (il testo che apparirà sotto le 5 barre nel grafico), gli altri sono i valori delle singole barre.
se si utilizzano meno di 5 barre, impostare le altre a zero (0).

printGraph() metodo
stampa effettivamente il grafico.

-------------------------------------------------------------------------------------

LEGGIMI
- le dimensioni delle barre sono tutte proporzionate al valore più grande (che occupa il 100% della length impostata)
- gli indicatori si basano sul valore più grande, indi possono non essere numeri "tondi"
- gli stili più specifici possono essere modificati direttamente all'interno della classe alla SUB printStyle
- da notare che le dimensioni delle singole 5 barre sono impostabili in maniera indipendente (per fare ad esempio due barre, una più grande e la seconda più piccola)
- per fare un nuovo grafico nella stessa pagina non è necessario DISTRUGGERE l'oggetto, ma solo eseguire il metodo reset(), e ricominciare come se l'oggetto fosse stato distrutto
- per fare un nuovo grafico nella stessa pagina con gli STESSI stili, ma nuovi valori è semplicemente necessario invocare il metodo clearValues()

-------------------------------------------------------------------------------------

ho cercato di adattare la classe per un "pubblico", anche se era nata per utilizzi specifici

spero che lo sforzo sia apprezzato, e che possa servire a qualcuno =)

ciao a tutti

(date commenti, modificate pure lo script se potete ottimizzarlo)

[Roby_72]

Esemplare!
Splendido Simone...

Roby

[unreg]

Bella classe

6 un mito



p.s. a quando la nuova classe WBCODE ?

[imente]

Originariamente inviato da unreg
p.s. a quando la nuova classe WBCODE ?

domani dai...
la finisco e pubblico

------

come roby ha giustamente detto (via msn) "ma perchè non usare le tabelle e farlo css only?"

la motivazione (prima che altri sollevino la giusta obiezione) è che nelle prossime versioni WBgraph sia accessibile, indi visualizzabile anche senza stili...
le tabelle in questo semplificano le cose

[unreg]

Originariamente inviato da imente
domani dai...
la finisco e pubblico

grazie e ancora complimenti per la classe, sia WBgraph che sto provando, che per WBCODE che uso da un po !


un commento a caldo della WBgraph: va che è una belva