Esta bien lo de resaltar con los colores, esto me dio una idea de la solucion
acotar tambien que no uso Canvas y VML por el tema de la compatibilidad entre navegadores, quiero hacer algo mas estandar que se vea bien en los navegadores antiguos, he probado en IE7, Firefox, Chrome y se ve bien, hay que testear en IE6.
Acerca de los valores creo no haberme explicado bien, la idea es que los valores de la barra salgan encima de cada barra (no los porcentuales), ahora bien hay valores porcentuales que salen debajo de la barra y eso esta bien ¿Me explico? esa seria una gran mejora como dices.
------------------------------------------------------------------------------------------------------
Bueno edito porque ya consegui que salieran los valores encima de la barra, ademas le he agregado bordes arriba y abajo de donde salen los valores porcentuales, ojo que los valores son solo de ejemplos por poner algun numero, asi se ve el grafico por ahora:
En Firefox 12
En Chrome 18
En IE 7
Código HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
table {
font:11px/120% Verdana, Arial, Helvetica, sans-serif;
color:#777777;
}
.barrasv {
width:2.5em;
text-shadow:#CCCCCC 0.1em 0.1em 0.1em;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:1px 1px 1px black;
-webkit-box-shadow:1px 1px 1px black;
-moz-box-shadow:1px 1px 1px black;
margin-bottom:1px;
}
.verticalmente {
position:relative;
transform:rotate(-90deg);
-o-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
writing-mode:tb-rl;
filter:flipv fliph;
margin:0 -1em;
}
#etiq td {
height:7em;
width:3em;
font-weight:bold;
}
.bordetd {
border-top: 1px solid #777777;
border-bottom: 1px solid #777777;
margin-left: 1px;
margin-right: 1px;
padding-top:1px;
padding-bottom:1px;
}
-->
</style>
</head>
<body>
<table align="center" cellpadding="0" cellspacing="0" border="0">
<tbody align="center">
<tr>
<td valign="bottom"><div style="vertical-align:text-top">25</div><div class="barrasv" style="height:31.6px; background-color:#BDDA4C"> </div></td>
<td valign="bottom"><div style="vertical-align:text-top">40</div><div class="barrasv" style="height:43.5px; background-color:#FF9A68"> </div></td>
<td valign="bottom"><div style="vertical-align:text-top">15</div><div class="barrasv" style="height:15.8px; background-color:#69ABBF"> </div></td>
<td valign="bottom"><div style="vertical-align:text-top">2</div><div class="barrasv" style="height:1.9px; background-color:#FFDE68"> </div></td>
<td valign="bottom"><div style="vertical-align:text-top">7</div><div class="barrasv" style="height:6.9px; background-color:#AB6487"> </div></td>
</tr>
<tr>
<td class="bordetd">31.6%</td>
<td class="bordetd">43.5%</td>
<td class="bordetd">15.8%</td>
<td class="bordetd">1.9%</td>
<td class="bordetd">6.9%</td>
</tr>
<tr id="etiq">
<td><div class="verticalmente">Productos Varios</div></td>
<td><div class="verticalmente">Repuestos de Vehculos</div></td>
<td><div class="verticalmente">Enceres</div></td>
<td><div class="verticalmente">Bienes Muebles</div></td>
<td><div class="verticalmente">Bienes Inmuebles</div></td>
</tr>
</tbody>
</table>
</body>
</html> Como ves en IE se ven muy pegados los porcentajes, seria bueno arreglarle los detalles, sin embargo creo que hemos logrado un buen trabajo.