Graficos de barras con CSS

Graficos de barras con CSS
3 mayo, 2009 Paco Castilla

Necesitais hacer graficos de barras para vuestro blog ? Pues con CSS lo tenemos fácil!
Os mostraré como genera diferentes tipos de graficos de barras.

1. Grafico de barras simple

imagen-21

Código CSS:
[css]
.grafico {
position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
.grafico .barra {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.grafico .barra span {
position: absolute; left: 1em;
}[/css]

Y este es el código html.
Creamos un “div” con la clase “grafico” y dentro del “div grafico” la barra. Así de sencillo!
[html]
<div class="grafico"><strong class="barra" style="width: 24%;">24%</strong></div>
[/html]
Ver los resultados de los graficos.

2. Grafico de barras complejo

barra-css2

Código CSS:
[css]
dl {
margin: 0;
padding: 0;
}
dt {
position: relative; /* IE is dumb */
clear: both;
display: block;
float: left;
width: 104px;
height: 20px;
line-height: 20px;
margin-right: 17px;
font-size: .75em;
text-align: right;
}
dd {
position: relative; /* IE is dumb */
display: block;
float: left;
width: 197px;
height: 20px;
margin: 0 0 15px;
background: url("g_colorbar.jpg");
}
* html dd { float: none; }
/* IE is dumb; Quick IE hack,
apply favorite filter methods for
wider browser compatibility */
dd div {
position: relative;
background: url("g_colorbar2.jpg");
height: 20px;
width: 75%;
text-align:right;
}
dd div strong {
position: absolute;
right: -5px;
top: -2px;
display: block;
background: url("g_marker.gif");
height: 24px;
width: 9px;
text-align: left;
text-indent: -9999px;
overflow: hidden;
}[/css]

Y este es el código html.
[html]
<dl> <dt>Love Life</dt> <dd>
<div style="width: 25%;"><strong>25%</strong></div>
</dd> <dt>Education</dt> <dd>
<div style="width: 55%;"><strong>55%</strong></div>
</dd> <dt>War Craft 3 Rank</dt> <dd>
<div style="width: 75%;"><strong>75%</strong></div>
</dd> </dl>
[/html]

3. Grafico de barras vertical

barra-css3

Código CSS:
[css]
#vertgraph {
width: 378px;
height: 207px;
position: relative;
background: url("g_backbar.gif") no-repeat;
}
#vertgraph ul {
width: 378px;
height: 207px;
margin: 0;
padding: 0;
}
#vertgraph ul li {
position: absolute;
width: 28px;
height: 160px;
bottom: 34px;
padding: 0 !important;
margin: 0 !important;
background: url("g_colorbar3.jpg") no-repeat !important;
text-align: center;
font-weight: bold;
color: white;
line-height: 2.5em;
}
#vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }
#vertgraph li.high { left: 101px; background-position: -28px bottom !important; }
#vertgraph li.medium { left: 176px; background-position: -56px bottom !important; }
#vertgraph li.low { left: 251px; background-position: -84px bottom !important; }
#vertgraph li.info { left: 327px; background-position: -112px bottom !important; }
[/css]

Y este es el código html.
[html]
<div id="vertgraph">
<ul>
<li class="critical" style="height: 150px;">22</li>
<li class="high" style="height: 80px;">7</li>
<li class="medium" style="height: 50px;">3</li>
<li class="low" style="height: 90px;">8</li>
<li class="info" style="height: 40px;">2</li>
</ul>
</div>
[/html]

4 Comentarios

  1. tiobuenow 9 años hace

    Gracias, por compartirlo.
    Eh agregado un enlace de la noticia hacia tu blog.
    Espero , que sigas asi.
    Ya que me interesa también , los temas de css , etc..
    Si quieres puedes visitarme , acabo de empezar, hace unos meses.
    Si te interesa un tema , no duces en enlazarme.
    puedes ver la noticia,

    aqui

    • Pkdisseny 9 años hace

      Hola “Tiobuenow” espero que vaya todo bien en tu blog! y animo con los css… es todo un mundillo !

  2. Ulberto 6 años hace

    Hola amigo, antes te agradesco las muy buenas intenciones, recien empiezo en esto, me llevas un poquillo de ventaja por no decir mucho, hombre yo tengo en esto exactamente 1 año; SOBRE GRAFICOS deseo intercalar información de valores estadisticos en que la resultante de la sumatoria de valores; por ejemplo costos sobre mantenimientos se acopien mediante una base de datos, al ser recibidos en automatico genere una grafica de valores acumulados; si me has entendido o no me lo dices para ser más especifico sobre este proyecto que estoy en vías de desarrollarlo poco a poco; y muchas gracias.

  3. Jhonatan Plata 5 años hace

    Muchas gracias, la verdad me sirvio mucho para graficar unas encuestas con asp. Excelente, Dios te bendiga.

Dejar una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.