Grafico de Barras Verticales

Ryan7777 · #1 (**permalink**) 25/05/2012, 11:15

Buen Dia!

Luchando he conseguido hacer un grafico de barras verticales decente con el siguiente codigo:

Código HTML:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
table {
	font:11px Verdana, Arial, Helvetica, sans-serif;
	color:#777;
	padding:7px;
}
.barrasv {
	width:30px;
	text-shadow:#CCC 0.1em 0.1em 0.1em;
	-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
}
.verticalmente {
	position:absolute;
	height:100px;
	width:100px;
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	writing-mode:tb-rl;
	filter:flipv fliph;
}
-->
</style>
</head>
<body>
<table align="center" cellpadding="2" cellspacing="2" border="0">
  <tbody align="center">
    <tr>
	<td valign="bottom"><div class="barrasv" style="height:31.6px; background-color:#BDDA4C">&nbsp;</div></td>
	<td valign="bottom"><div class="barrasv" style="height:43.5px; background-color:#FF9A68">&nbsp;</div></td>
	<td valign="bottom"><div class="barrasv" style="height:15.8px; background-color:#69ABBF">&nbsp;</div></td>
	<td valign="bottom"><div class="barrasv" style="height:1.9px; background-color:#FFDE68">&nbsp;</div></td>
	<td valign="bottom"><div class="barrasv" style="height:6.9px; background-color:#AB6487">&nbsp;</div></td>
    </tr>
    <tr>
	<td>31.6%</td>
	<td>43.5%</td>
	<td>15.8%</td>
	<td>1.9%</td>
	<td>6.9%</td>
    </tr>
    <tr>
	<td><strong><div class="verticalmente">Productos Varios</div></strong></td>
	<td><strong><div class="verticalmente">Repuestos de Vehiculos</div></strong></td>
	<td><strong><div class="verticalmente">Enceres</div></strong></td>
	<td><strong><div class="verticalmente">Bienes Muebles</div></strong></td>
	<td><strong><div class="verticalmente">Bienes Inmuebles</div></strong></td>
    </tr>
  </tbody>
</table>
</body>
</html>

El problema es que las etiquetas de los datos no se ven centradas con respecto a la grafica, tambien si la etiqueta es corta se ve como centrada en top, por favor una ayuda para resolver este rollo de alineacion.

NOTA:

- La solucion debe ser para html y css no deseo usar librerias de imagenes para hacer el grafico.
- Esta probado de IE6 y superiores, Chrome y Firefox.

furoya · #2 (**permalink**) 25/05/2012, 17:54

Bueno, no está mal.

Gracias por poner el código completo para probar. Debería ser lo común, pero desgraciadamente eres la excepción.

Código:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
table {
	font:11px Verdana, Arial, Helvetica, sans-serif;
	color:#777;
	padding:7px;
	width: 350px;
}
.barrasv {
	width:30px;
	text-shadow:#CCC 0.1em 0.1em 0.1em;
	-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
}
.verticalmente {
	position:relative;
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	writing-mode:tb-rl;
	filter:flipv fliph;
	background : red;
	vert ical-align: middle;
	mar gin:0 auto;
}

#etiq td {
	height: 100px;
}
strong {background-color : lime}
-->
</style>
</head>
<body>
<table align="center" cellpadding="2" cellspacing="2" border="1">
  <tbody align="center">
    <tr>
	<td valign="bottom"><div class="barrasv" style="height:31.6px; background-color:#BDDA4C">&nbsp;</div></td>
	<td valign="bottom"><div class="barrasv" style="height:43.5px; background-color:#FF9A68">&nbsp;</div></td>
	<td valign="bottom"><div class="barrasv" style="height:15.8px; background-color:#69ABBF">&nbsp;</div></td>
	<td valign="bottom"><div class="barrasv" style="height:1.9px; background-color:#FFDE68">&nbsp;</div></td>
	<td valign="bottom"><div class="barrasv" style="height:6.9px; background-color:#AB6487">&nbsp;</div></td>
    </tr>
    <tr>
	<td>31.6%</td>
	<td>43.5%</td>
	<td>15.8%</td>
	<td>1.9%</td>
	<td>6.9%</td>
    </tr>
    <tr id="etiq">
	<td><div class="verticalmente"><strong>Productos Varios</strong></div></td>
	<td><strong><div class="verticalmente"><strong>Repuestos de Vehiculos</strong></div></strong></td>
	<td><strong><div class="verticalmente"><strong>Enceres</strong></div></strong></td>
	<td><strong><div class="verticalmente"><strong>Bienes Muebles</strong></div></strong></td>
	<td><strong><div class="verticalmente"><strong>Bienes Inmuebles</strong></div></strong></td>
    </tr>
  </tbody>
</table>
</body>
</html>

Espero que el problema se ése.

Ryan7777 · #3 (**permalink**) 26/05/2012, 14:22

Gracias amigo, esta casi completamente bien.

Seria mejor si las columnas estan lo mas cerca posible unas de otras, esto por cuestion de estetica ya que posiblemente se requieran reportes de hasta 24 barras (comparacion de años donde esten todos los meses), como esta ocuparia un ancho excesivo.

Edite un poco tu codigo para sacar las lineas que vi no hacen nada y me quedo lo siguiente:

Código HTML:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
table {
	font:11px Verdana, Arial, Helvetica, sans-serif;
	color:#777;
	padding:0px;
}
.barrasv {
	width:30px;
	text-shadow:#CCC 0.1em 0.1em 0.1em;
	-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
}
.verticalmente {
	position:relative;
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	writing-mode:tb-rl;
	filter:flipv fliph;
}
#etiq td {
	height:100px;
	width:30px;
}
-->
</style>
</head>
<body>
<table align="center" cellpadding="0" cellspacing="0" border="1">
  <tbody align="center">
    <tr>
	  <td valign="bottom"><div class="barrasv" style="height:31.6px; background-color:#BDDA4C">&nbsp;</div></td>
	  <td valign="bottom"><div class="barrasv" style="height:43.5px; background-color:#FF9A68">&nbsp;</div></td>
	  <td valign="bottom"><div class="barrasv" style="height:15.8px; background-color:#69ABBF">&nbsp;</div></td>
	  <td valign="bottom"><div class="barrasv" style="height:1.9px; background-color:#FFDE68">&nbsp;</div></td>
	  <td valign="bottom"><div class="barrasv" style="height:6.9px; background-color:#AB6487">&nbsp;</div></td>
    </tr>
    <tr>
	  <td>31.6%</td>
	  <td>43.5%</td>
	  <td>15.8%</td>
	  <td>1.9%</td>
	  <td>6.9%</td>
    </tr>
    <tr id="etiq">
	  <td width="30"><div class="verticalmente"><strong>Productos Varios</strong></div></td>
	  <td width="30"><div class="verticalmente"><strong>Repuestos de Vehiculos</strong></div></td>
	  <td width="30"><div class="verticalmente"><strong>Enceres</strong></div></td>
	  <td width="30"><div class="verticalmente"><strong>Bienes Muebles</strong></div></td>
	  <td width="30"><div class="verticalmente"><strong>Bienes Inmuebles</strong></div></td>
    </tr>
  </tbody>
</table>
</body>
</html>

La cereza al pastel seria poder colocar arriba de la barra el valor de la misma.

furoya · #4 (**permalink**) 26/05/2012, 18:34

Sí, esas líneas estaban para que tuvieras una idea de cómo estaba organizado el diseño, eran unos colores y bordes, aunque vi que border=1 no lo cambiaste a 0.

Te corregí los ejemplos porque era más rápido que escribir toda la explicación. Igual a éste vas a tener que darle una repasada, por el orden de las propiedades. (Agregué las de Opera)
Tienes serios problemas de compatibilidad, no estoy seguro de que en todas las versiones de IE se vea bien. En la 6 seguro va a saltar alguna "desalineación" pero igual se va a entender.

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;
	padding:0;
}
.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
}
.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; 
//background-color:red;
}
#etiq td {
	height:7em;
	width:3em;
	font-weight:bold;
}

-->
</style>
</head>
<body>
<table align="center" cellpadding="0" cellspacing="0" border="1">
  <tbody align="center">
    <tr>
	  <td valign="bottom"><div class="barrasv" style="height:31.6px; background-color:#BDDA4C">&nbsp;</div></td>
	  <td valign="bottom"><div class="barrasv" style="height:43.5px; background-color:#FF9A68">&nbsp;</div></td>
	  <td valign="bottom"><div class="barrasv" style="height:15.8px; background-color:#69ABBF">&nbsp;</div></td>
	  <td valign="bottom"><div class="barrasv" style="height:1.9px; background-color:#FFDE68">&nbsp;</div></td>
	  <td valign="bottom"><div class="barrasv" style="height:6.9px; background-color:#AB6487">&nbsp;</div></td>
    </tr>
    <tr>
	  <td>31.6%</td>
	  <td>43.5%</td>
	  <td>15.8%</td>
	  <td>1.9%</td>
	  <td>6.9%</td>
    </tr>
    <tr id="etiq">
	  <td><div class="verticalmente">Productos Varios</div></td>
	  <td><div class="verticalmente">Repuestos de Vehículos</strong></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>

Y en los códigos que pusiste ya están los valores : en la fila del medio ¿cómo no los viste? ¿o son otros valores que quieres poner arriba?

Insisto, hay que darle la repasada final, porque seguro hay cosas que se pueden mejorar. Lo de la distancia está parchado medio a lo bruto, forzando una reducción de margen.

Estaba pensando por qué no usaste canvas y VML para hacer todo el gráfico (incluyendo el texto). Algunos navegadores hasta te dejarían copiar y guardar esa imagen.

Como hacer graficas de pastel y de barras

Ryan7777 · #5 (**permalink**) 26/05/2012, 22:41

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">&nbsp;</div></td>
	  <td valign="bottom"><div style="vertical-align:text-top">40</div><div class="barrasv" style="height:43.5px; background-color:#FF9A68">&nbsp;</div></td>
	  <td valign="bottom"><div style="vertical-align:text-top">15</div><div class="barrasv" style="height:15.8px; background-color:#69ABBF">&nbsp;</div></td>
	  <td valign="bottom"><div style="vertical-align:text-top">2</div><div class="barrasv" style="height:1.9px; background-color:#FFDE68">&nbsp;</div></td>
	  <td valign="bottom"><div style="vertical-align:text-top">7</div><div class="barrasv" style="height:6.9px; background-color:#AB6487">&nbsp;</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.

furoya · #6 (**permalink**) 27/05/2012, 08:38

Cita:

Iniciado por Ryan7777

...acotar tambien que no uso Canvas y VML por el tema de la compatibilidad entre navegadores, quiero hacer algo mas estandar ...

Cita:

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;
. . .
transform:rotate(-90deg);
-o-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-filter:progid:DXImageTransform.Microsoft.BasicImag e(rotation=3);
filter:progid:DXImageTransform.Microsoft.BasicImag e(rotation=3);
writing-mode:tb-rl;
filter:flipv fliph;

¡No se puede ser tan caradura!

Estaba pensando que también se podría hacer todo en PHP, hasta los textos, que ya se bajarían rotados con la imagen.
Pero solamente si es para una página web. Si estás haciendo una presentación ya no sé si conviene.

Ryan7777 · #7 (**permalink**) 27/05/2012, 17:34

Jajajaja pero observa que si corre en los navegadores en cambio Canvas no en todos o ¿Me equivoco?

Y claro hermano eso va ser dinamico con php, los textos y todo lo demas, lo que pasa es que suelo exponer el problema de forma concreta con otros datos, asi no enredo de todo el codigo que tengo al que me va ayudar.

Podrias chequear en otros navegadores, es que mi internet es malo para bajarme Opera, Konqueror, Safari y el resto.

¿Que crees que haga falta?

furoya · #8 (**permalink**) 28/05/2012, 04:50

Sí, canvas funciona en todos. Solamente vas a tener problemas con versiones viejas de IE, pero ahí usas VML.
Es exactamente lo mismo que estás haciendo con "transform:rotate(); filter:progid:DXImageTransform.Microsoft.BasicImag e();", usas un código para cada uno.

Pero si lo vas a hacer con PHP, te ahorras todos los estilos; porque toda la tabla va a ser una sola imagen generada con GD, o como decidas hacerlo. La programación va del lado servidor.

Entonces no vale la pena meterse a probar en todos los navegadores : la etiqueta <img> seguro se va a ver igual.

De todas formas, en Opera, Mozilla Firefox, Chrome y (lo pude probar!) IE6 andan bien. En éste último no se ven las esquinas redondas y el texto vertical está algo desplazado a la izquierda, pero se entiende perfectamente.

Con respecto a lo del "estándar", estás usando filtros de MS, prefijos propietarios y CSS3 (que aún esta en su fase Wewillsee). Esto no valida ni por casualidad, no es estándar.

Suerte con el proyecto, y cuando tengas la versión final no olvides poner algún enlace, así vemos cómo quedó después de tanto trabajo.

Ryan7777 · #9 (**permalink**) 28/05/2012, 07:20

Bueno no queda mas que agradecer por la gran ayuda.

Ya de hace tiempo uso jpgraph con php no se si lo conoces es una libreria muy buena, genera grafico de diversas formas como una imagen asi como me lo sugieres, pero queria tener alguna forma alterna para mostrar graficos pequeños como esta y que sirviera en varios navegadores.

¡Gracias nuevamente!