Crear gráficos de barras con PHP
Esta es una forma bastante sencilla de crear gráficos mediante PHP y HTML. A partir de una array, que podría construirse a partir de datos extraidos de una base de datos, se extraen los literales, se calcula el porcentaje y se le asigna un color para cada una de las barras.
Supongamos que tenemos unas visitas que proceden: 220 de google, 160 directas, 80 de bloglines, 10 de del.icio.us y 35 de yahoo. El script para generar un gráfico podría ser:
<html>
<style type="text/css">
<!--
table {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #777;
padding:7px;
}
-->
</style>
<?php
$datosTabla = array(
array( "directas", 160, "#BDDA4C"),
array( "google", 220, "#FF9A68"),
array( "bloglines", 80, "#69ABBF"),
array( "del.icio.us", 10, "#FFDE68"),
array( "yahoo", 35, "#AB6487")
);
$maximo = 0;
foreach ( $datosTabla as $ElemArray ) { $maximo += $ElemArray[1]; }
?>
<body>
<table width="400" cellspacing="0" cellpadding="2">
<?php foreach( $datosTabla as $ElemArray ) {
$porcentaje = round((( $ElemArray[1] / $maximo ) * 100),2);
?>
<tr>
<td width="20%"><strong><?php echo( $ElemArray[0] ) ?></strong></td>
<td width="10%"><?php echo( $porcentaje ) ?>%</td>
<td>
<table width="<?php echo($porcentaje) ?>%" bgcolor="<?php echo($ElemArray[2]) ?>">
<tr><td></td></tr>
</table>
<</td>
</tr>
<?php } ?>
</table>
</body>
</html>
Ver ejemplo en funcionamiento » »
También te puede interesar:
| Super Screenshot | 20 Estrategias para derrotar a la necesidad de hacer tareas inútiles | Recupera el serial de tu instalación de Windows | Theme gratuito para WordPress: Old News | Smoking woman |
Comentarios
| 1 |
|
Hugo Gracias por compartir esta información. Era lo que andaba buscando. Saludos =) |
| 2 |
|
Ariel Bueeenaaaa!!!!.. thank por conpartir... :) .... bueno, buenisimo.... Thank .. xau |
| 3 |
|
Franklin Muchas gracias amigos....es un muy buen aporte |
| 4 |
|
Jonatan alguna idea para hacer que se vea una especie de "regla" indicando los porcentajes o valores en la parte superior del grafico? El post muy bueno, me vino bien para lo que estoy haciendo |
| 5 |
|
Urien MuchÃsimas gracias!! Código sencillo y útil =) |
| 6 |
|
Urien Hola de nuevo! ¿Os habéis fijado que este gráfico se ve distinto con IE que con Firefox? Creo que el problema está en el padding de la tabla (definida con css). Saludos!! |
| 7 |
|
Adrian Mil gracias, codigo muuy util |
| 8 |
|
Benjamin Excelente. Encontré lo que buscaba. gracias. |
| 9 |
|
jfgg01 Senicllamente excelente y PODEROSO!!!! |
| 10 |
|
Miguel Excelente código, agradezco el aporte. Muy preciso y en pocas lÃneas de código!!! |
| 11 |
|
Elros Buen aporte, yo consegui el mismo efecto usando divs en lugar de tablas, mucho mas facil a la hora de usar css |
| 12 |
|
cesar http://www.ventadeweb.com muy bueno pero hay uan clase que haga eso ?? |
| 13 |
|
Francisco http://www.webintenta.com Hola, Existen bastantes librerÃas de PHP que facilitan la creación de gráficos con PHP. Quizá una de las más usadas sea pChart: http://pchart.sourceforge.net/ Saludos. |
| 14 |
|
luis me gustaria saber si existe la posibilidad de graficar verticalmente o que podris agregar para que me grafique verticalmente |























Josep Viciana en Twotiny Icon Set




