PHP

Ξ 62 comentarios

Cómo crear graficos mediante PHP

por Xabadu
Cómo crear graficos mediante PHP

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.

Comparte este tutorial

El culpable de todo esto

Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extraño para Xabadu. Luego de ser descubierto a los 4 años en un partido de barrio por los ojeadores del gran Aviación F.C., sacudió el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungará y una incursión en la 3a división del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros más recordados en la historia pelotera nacional. Una lesión en el colmillo superior derecho lo llevó al retiro el año 2003, pero está de vuelta y sin duda que su jerarquía y experiencia internacional será un gran aporte.

En los barrios marginales se le conoce como: Xabadu

Comentarios en Facebook

62 Comentarios

  • para que funcionen estos excelentes graficos si o si es necesario tener conexion a internet

  • GENIAL GRANDE COMO LO HAGO !!!

  • lo probé pero cuando losda el grafico hasta el maximo valor? datos no pueden pasar de 100, ¿cual seria el atributo que agran

  • no me resulta, no tengo ningún error en compilación, pero solo me dice el titulo y no muestra los graficos!

    qué será?

  • solucionado…

    olvide (ustedes tambien) poner al final “echo $chart;”

    estaba haciendo el que tiene la coneccion a la BD de datos
    ahora funciona perfectamente!

    saludos y muchas gracias

  • @Twonex: La verdad lo habíamos añadido en el paso 8 del tutorial en la parte 1, pero se nos fue añadirlo al final. Gracias por mencionarlo. Nos alegramos que te haya funcionado.

    Saludos

  • Muchachos me da el siguiente error.
    Parse error: parse error, unexpected T_CONST, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in c:\inetpub\wwwroot\GoogChart.class.php on line 36
    la linea 36 tiene el siguiente codigo
    const BASE = ‘http://chart.apis.google.com/chart?’;
     
    Que puede ser. ?

  • Al igual que Cristian pregunto…
    qué hay que hacer para que lo graficos muestren valores por sobre 100?
    tengo 12 datos (un año completo)
    y el grafico muestra lo siguiente
    enero 10
    febrero 20
    marzo 30
    abril 40 —> acá complete los 100
    mayo 40 (deberia ser 50)
    junio 40 (deberia ser 60)
    julio 40 (deberia ser 70)
    etc,…
     
    cómo se soluciona esa?
    saludos

  • @Twonex: Esta clase por defecto funciona bajo el paradigma de porcentajes, por eso 100 es el máximo. Para modificar los valores hay que editar la clase que se utiliza.

    Actualmente estoy revisando el código para buscar una solución a este problema. De encontrarla actualizaremos el tutorial.

    Saludos!

  • hola quiero consultar de que forma puedo cargar los datos a el array ya que como lo hago no me aparecen los nombre abajo en el eje x solo me salen los numeros indices:

    while($j<$total2){
     $dataMultiple[$nodo[$j]] = $porcentaje[$j];
     $j++;}

1 2 3 7

Responder a tiam Cancelar respuesta

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

Gente linda que nos quiere

Donde mas estamos