codice:
<html>
<head>
<title>Grafico a barre con i CSS</title>
</head>
<body>
<p style="color: #000; font-size: 11px; font-family:verdana;font-weight:bold;">Legenda:</p>
<%
'Voci della legenda
voce1 = "Bianchi"
voce2 = "Verdi"
voce3 = "Rossi"
voce4 = "Viola"
voce5 = "Gialli"
%>
<table style="color: #000; font-size: 11px; font-family:verdana;" cellspacing="0" cellpadding="0">
<tr>
<td><div style="width: 10px; height: 10px; background-color: #999966; border: 1px ridge #999966;"></div></td>
<td> <%=voce1%></td>
</tr>
<tr>
<td><div style="width: 10px; height: 10px; background-color: #669966; border: 1px ridge #669966;"></div></td>
<td> <%=voce2%></td>
</tr>
<tr>
<td><div style="width: 10px; height: 10px; background-color: #666666; border: 1px ridge #666666;"></div></td>
<td> <%=voce3%></td>
</tr>
<tr>
<td><div style="width: 10px; height: 10px; background-color: #996666; border: 1px ridge #996666;"></div></td>
<td> <%=voce4%></td>
</tr>
<tr>
<td><div style="width: 10px; height: 10px; background-color: #669999; border: 1px ridge #669999;"></div></td>
<td> <%=voce5%></td>
</tr>
</table>


<%
'Valori di ogni voce
totale = 0
prima = 99
seconda = 1
terza = 0
quarta = 0
quinta = 0

'Conto i valori totali
totale = 0
totale = (prima + seconda + terza + quarta + quinta)

'Percentuali
if totale > 0 then
prima2 = prima / totale
seconda2 = seconda / totale
terza2 = terza / totale
quarta2 = quarta / totale
quinta2 = quinta / totale
else
prima2 = 0
seconda2 = 0
terza2 = 0
quarta2 = 0
quinta2 = 0
end if

'le percentuali, senza i decimali, sono utilizzate come dimensione per le barre colorate
prima3 = Cint(prima2*100) * 2
seconda3 = Cint(seconda2*100) * 2
terza3 = Cint(terza2*100) * 2
quarta3 = Cint(quarta2*100) * 2
quinta3 = Cint(quinta2*100) * 2
%>
<div style="position:relative; background-image: url(grafico.gif);background-color: #ffffff; border-collapse: collapse; width:240px; height:200px;">

<div style="border:1px ridge #999966;border-bottom:1px solid #999999;z-index:2;position:absolute;font-size:11px;left:41px; bottom:0;">
<div style="height:<%=prima3%>px;width:34px;background-color:#999966;" title="<%=voce1 &": "& FormatPercent(prima2, 1)%>">
<%=FormatPercent(prima2, 1)%></div></div>

<div style="border:1px ridge #669966;border-bottom:1px solid #999999;z-index:2;position:absolute;font-size:11px;left:81px; bottom:0;">
<div style="height:<%=seconda3%>px;width:34px;background-color:#669966;" title="<%=voce2 &": "& FormatPercent(seconda2,1)%>">
<%=FormatPercent(seconda2, 1)%></div></div>

<div style="border:1px ridge #666666;border-bottom:1px solid #999999;z-index:2;position:absolute;font-size:11px;left:121px; bottom:0;"><div style="height:<%=terza3%>px;width:34px;background-color:#666666;" title="<%=voce3 &": "& FormatPercent(terza2,1)%>">
<%=FormatPercent(terza2, 1)%></div></div>

<div style="border:1px ridge #996666;border-bottom:1px solid #999999;z-index:2;position:absolute;font-size:11px;left:161px; bottom:0;"><div style="height:<%=quarta3%>px;width:34px;background-color:#996666;" title="<%=voce4 &": "& FormatPercent(quarta2,1)%>">
<%=FormatPercent(quarta2, 1)%></div></div>

<div style="border:1px ridge #669999;border-bottom:1px solid #999999;z-index:2;position:absolute;font-size:11px;left:201px; bottom:0;"><div style="height:<%=quinta3%>px;width:34px;background-color:#669999;" title="<%=voce5 &": "& FormatPercent(quinta2,1)%>">
<%=FormatPercent(quinta2, 1)%></div></div>

</div>
</body>
</html>