Gráficos de barras con ASP

La idea es realizar gráficos de barras horizontales y verticales, podemos utilizar estos gráficos para mostrar estadísticas o resultados de encuestas o votaciones de forma mas vistosa, para que vean como quedaría este ejemplo aplicado les muestro este gráfico...

CODIGO FUENTE

<p>Gráfico Horizontal</p>
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr><td>
<%
Dim ancho
ancho = 240
Response.Write ("<img src=azul.gif width=" & ancho & " height=20>")
%>
</td></tr>
<tr><td>
<%
ancho = 140
Response.Write ("<img src=rojo.gif width=" & ancho & " height=20>")
%>

</td></tr>
<tr><td>
<%
ancho = 270
Response.Write ("<img src=verde.gif width=" & ancho & " height=20>")
%> </td></tr>
</table>

El código ASP si se fijan esta mezclado con una tabla de 3 renglones (rows) y una columna (cols) obviamente si queremos hacer un gráfico horizontal debemos colocar las imágenes en los renglones de la tabla e ir modificando mediante código ASP su propiedad "width"...

<%
Dim ancho
ancho = 240
Response.Write ("<img src=azul.gif width=" & ancho & " height=20>")
%>

Observen que "ancho" es una variable a la cual le dimos un valor de 240, y de que sirve? quizás a simple vista no se dan cuenta pero esa variable "ancho" puede ser el valor de un campo que hay en una base de datos el cual puede ir cambiando dinámicamente según el contexto, por ejemplo si trabajamos con un sistema de votación el valor de "ancho" seguramente ira variando a lo largo que se van desarrollando las votaciones. Quizás les sea mas cómodo un gráfico vertical, pues aquí el código...

<p>Gráfico Vertical</p>
<table width="19%" border="0" cellspacing="2" cellpadding="0" height="10">
<tr valign="bottom">
<td height="2">
<% Dim alto
alto = 120
Response.Write ("<img src=azul.gif width=50 height=" & alto & ">")
%>
</td>
<td height="2">
<%
alto = 54
Response.Write ("<img src=rojo.gif width=50 height=" & alto & ">")
%>
</td>
<td height="2">
<%
alto = 60
Response.Write ("<img src=verde.gif width=50 height=" & alto & ">")
%>
</td>
</tr>
</table>

Aquí es lo mismo que en el gráfico anterior pero en ves de poner los gráficos en los 3 renglones creamos una tabla de 1 renglón y 3 columnas y en estas colocamos los gráficos, otro cambio es que en ves de modificar la propiedad "width" modificamos "height".

Si hacen click aquí se puede bajar el código fuente completo, saludos El Guru.