Una buena utilidad cuando estamos desarrollando algún sitio Web o sistema con PHP y manipulamos una buena cantidad de datos, es incorporar gráficos, los cuales sirven para resumir de mejor manera esta información y así facilitar su entendimiento.

Para lograr este propósito hay una serie de librerías y herramientas de distinto tipo que nos otorgan diferentes resultados dependiendo de lo que necesitemos. Después de analizar varias de ellas, hemos encontrado una bastante simple de implementar y más importante aún, atractiva en su diseño.

Como siempre, el detalle, después del salto.

Cómo crear gráficos mediante PHP

Dentro de las herramientas que analizamos para presentar la opción, la gran mayoría de ellas generaban los gráficos en Flash, lo cual a pesar de ser extremadamente atractivo en términos de diseño, puede no ser la alternativa óptima en algunas situaciones, ya que su tiempo de carga es mayor y hay navegadores que no tienen los complementos instalados para visualizar ese tipo de contenido.

Es por esto que nos hemos inclinado por una clase en PHP que hemos encontrado dando vuelta por ahí, la cual está basada en la API de Google para la generación de gráficos (Google Chart API), y que ha corregido algunos problemas que esta última tenía, como la generación de gráficos de datos múltiples. Hablamos de GoogChart.

Así que como siempre, lo primero:

Implementos necesarios:

1. La clase GoogChart, que pueden encontrarla para su descarga en Google Code.
2. Un editor Web. En CLH utilizamos y recomendamos Adobe Dreamweaver.
3. Un servidor Web que ejecute archivos PHP, ya sea de forma local o algún hosting.
4. Una base de datos en MySQL, opcional si queremos generar los gráficos dinamicamente.

Con todo eso claro, vamos, manos a la obra:

Procedimiento:

1.- Gráficos estáticos

1.- Al descargar GoogChart y descomprimirla, encontraremos un archivo llamado GoogChart.class.php. Este archivo corresponde a la clase que contiene todos los métodos necesarios para la generación de los gráficos. Este archivo debemos guardarlo en cualquier parte de nuestro servidor Web (local o hosting). Por un orden, nosotros lo hemos dejado dentro de un directorio includes.

2.- En nuestro editor Web, creamos un nuevo archivo PHP, al cual llamaremos ejemplo.php en el que insertaremos nuestro gráfico.

3.- En una primera etapa, crearemos un gráfico con datos fijos y luego dinamicamente. Para el primero, partimos por incluir la clase:

include “includes/GoogChart.class.php”;

4.- Luego, creamos un nuevo objeto de tipo GoogChart, el cual se lo asignaremos a la variable $chart:

$chart = new GoogChart( );

5.- A continuación, comenzamos a fijar algunos atributos de nuestro gráfico, como por ejemplo, el color, que lo haremos asignado un array de valores de color en hexadecimal a la variable $color, la cual luego pasaremos por parámetro junto con todas las otras:

$color = array( ‘#95b645’, ‘#7498e9’, ‘#999999’,);

6.- Después de fijar nuestros colores (pueden dejar los suyos como más les guste), comenzaremos el proceso de llenado de datos, el cual lo haremos de forma manual en este primer ejemplo mediante un array:

$dataMultiple = array(
‘Año 2009’ => array(
XBox => 30,
PS3 => 20,
Wii => 45,
Otros => 5,

),
‘Año 2008’ => array(
XBox => 40,
PS3 => 20,
Wii => 30,
Otros => 10,
),
);

Nuestra variable $dataMultiple, almacena un array el cual contiene las leyendas (Año 2009 y Año 2008), los valores del eje X (XBox, PS3, Wii y Otros) y los valores del eje Y que son los que están a la derecha de cada nombre.

7.- Una vez que hemos definido los datos, hacemos la llamada a la clase enviando los parámetros y añadiendo primero un título mediante etiquetas HTML <h2>:

echo ‘<h2>MERCADO DE VIDEOJUEGOS</h2>’;
$chart->setChartAttrs( array(
‘type’ => ‘bar-vertical’,
‘title’ => ‘Ventas: ‘.$fecha,
‘data’ => $dataMultiple,
‘size’ => array( 550, 300 ),
‘color’ => $color,
‘labelsXY’ => true,
));

El código anterior parte definiendo los atributos del gráfico, mediante el método setChartAttrs el cual se constituye de los siguientes parámetros:

• type: Tipo de gráfico. Puede ser: bar-vertical, pie, line, sparkline,bar-horizontal.
• title: El título del gráfico. Se puede definir a gusto.
• data: La fuente de los datos.
• size: El tamaño del gráfico.
• color: Los colores que se utilizarán (definidos más arriba)
• labelsXY: Define si muestra o no los ejes.

8.- Luego del código anterior, hacemos la llamada para desplegar el gráfico, mediante:

echo $chart;

Y ejecutamos ejemplo.php, con lo que debería aparecernos esto en pantalla:

Fácil y bonito, ¿No?

Ese ejemplo es relativamente sencillo. Ahora, compliquemoslo un poco. Realizar gráficos con datos estáticos es relativamente simple, ya que el proceso será siempre igual y podemos tener completo control de lo que se va a mostrar. Pero, ¿qué pasa si queremos generar los gráficos con datos dinámicos obtenidos desde una base de datos o mediante algún formulario?, ahora veremos como:

2.- Gráficos Dinámicos:

Consideremos la siguiente organización de datos, en una tabla llamada ventas, donde tenemos campos llamados empresa, ventas_2008 y ventas_2009:

1.- Lo primero que haremos, será conectarnos a nuestra BD y recuperar los datos desde la tabla, para eso, en nuestro mismo ejemplo.php, borrando el ejemplo anterior o a continuación, como prefieran:

$conexion=mysql_connect(“dirección del servidor”, “nombre de usuario”, “contraseña”);
mysql_select_db(“nombre de su bd”, $conexion);
$consulta=”SELECT * FROM ventas”;
$resultado=mysql_query($consulta, $conexion);

2.- Luego de que hemos rescatado los datos desde la BD, procederemos a almacenar los valores en varios arrays, uno correspondiente a las empresas, uno a las ventas 2008 y uno a las ventas 2009:

$i=0;
while($registro=mysql_fetch_array($resultado))
{
$empresa[$i]=$registro[“empresa”];
$ventas2008[$i]=$registro[“ventas2008”];
$ventas2009[$i]=$registro[“ventas2009”];
$i++;
}

Con eso lo que hemos hecho es mediante un ciclo, ir extrayendo todos los registros que retornó la consulta de manera secuencial y asignarlos a cada posición del vector, la cual va aumentando mediante la variable $i. Con esto ya tendremos todos nuestros datos asignados a tres distintos arrays, que usaremos como base para crear los gráficos.

3.- Ahora repetimos los pasos 3, 4 y 5 de la forma anterior, o sea, incluimos la clase, creamos el objeto y definimos los colores:

include(“includes/GoogChart.class.php”);
$chart = new GoogChart( );
$color = array ( ‘#95b645’, ‘#7498e9’, ‘#999999’,);

4.- A continuación, definiremos nuestro array de datos, que a diferencia del caso anterior, ahora se creará de forma dinámica con los resultados obtenidos de la BD:

$dataMultiple = array(
‘Año 2009’ => array(
$empresa[0] => $ventas2009[0],
$empresa[1] => $ventas2009[1],
$empresa[2] => $ventas2009[2],
$empresa[3] => $ventas2009[3],

),
‘Año 2008’ => array(
$empresa[0] => $ventas2008[0],
$empresa[1] => $ventas2008[1],
$empresa[2] => $ventas2008[2],
$empresa[3] => $ventas2008[3],
),
);

5.- Y hacemos el llamado al método de la clase que generará el gráfico, enviando los parámetros correspondientes:

echo ‘<h2>MERCADO DE VIDEOJUEGOS</h2>’;
$chart->setChartAttrs( array(
‘type’ => ‘bar-vertical’,
‘title’ => ‘Ventas: ‘.$fecha,
‘data’ => $dataMultiple,
‘size’ => array( 550, 300 ),
‘color’ => $color,
‘labelsXY’ => true,
));

Con lo que deberíamos obtener un resultado como este:

Así de simple, aunque debemos considerar que este ejemplo es bastante básico y conocíamos en todo momento el número de datos que ibamos a gráficar. Cuando desconozcamos ese dato solo debemos hacer una pequeña modificación en el código y ampliar los arrays donde guardamos la información.

Como hemos podido ver, añadir gráficos a nuestros sitios Web o sistemas puede ser muy sencillo, solo integrando una pequeña clase y unas cuantas líneas de código podemos generar estos gráficos, ya sea con datos estáticos que conozcamos en todo momento, o haciendo las llamadas respectivas a una base de datos.

Una de las grandes ventajas de la utilización de esta clase es que los gráficos generados son imagenes en formato PNG, que permite hacer la carga muy rápidamente y el riesgo de incompatibilidad baja considerablemente comparado con Flash.

Recuerden que como siempre, este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.