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.
|
