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

  • Hola, gracias por otro excelente tutorial! Un comentario nomás: si los campos en la base de datos se llaman ventas_2008 y ventas_2009, entonces hay que hacer la siguiente mínima modificación en el código PHP:
    AHOAR DICE:
    $ventas2008[$i]=$registro[“ventas2008”];
    $ventas2009[$i]=$registro[“ventas2009”];

    DEBE DECIR:
    $ventas2008[$i]=$registro[“ventas_2008”];
    $ventas2009[$i]=$registro[“ventas_2009”];

    Gracias de nuevo!

  • hola, alguien pudo solucionar ese problema de que 100, es el limite del eje Y? yo quiero graficar valores en miles o millones, no porcentajes, ai alguien sabe como graficar de acuerdo al valor que se le porfavor que me lo diga

  • muchas gracias, salio todo bien ahora como puedo pener el porcentaje sobre la torta..

  • @Toolszigfrit: Esta método utiliza la API de Google Charts, la cual envía un gráfico en formato PNG de acuerdo a los parámetros enviados (valores del gráfico en cada eje y tamaño de la imagen), por lo que no es posible generar texto personalizado sobre esta imagen.

    Saludos!

  • Xabadu
    muchas gracias por tus comentarios, nunca había obtenido una respuesta tan rápido.
    se agradece..

  • Estoy realizando el grafico dinamico, no m sale ningun error de compilacion, pero tampoco muestra la grafica, ya le agregue  echo $chart; y m sale tan solo las lineas mas no las barras, si alguien m puede ayudar le agradeceria

  • @ansuka: Si nos pudieses mostrar tu código sería ideal para ayudarte de mejor manera.

    Saludos!

  • Tome el ejemplo, ya q el proyecto q tengo q desarrollar es similar, este es el codigo:

    <?php
    $conexion=mysql_connect(“servidor”, “usuario”, “contraseña”);
    mysql_select_db(“grafica”, $conexion);
    $consulta=”SELECT * FROM ventas”;
    $resultado=mysql_query($consulta, $conexion);
    $i=0;
    while($registro=mysql_fetch_array($resultado))
    {
    $empresa[$i]=$registro[“Empresa”];
    $ventas2008[$i]=$registro[“Ventas_2008”];
    $ventas2009[$i]=$registro[“Ventas_2009”];
    $i++;
     }
    include “GoogChart.class.php”;
    $chart = new GoogChart( );
    $color = array ( ‘#95b645’, ‘#7498e9’, ‘#999999’,);
    $dataMultiple = array(
    ‘Año 2009’ => array(
    $registro[0] => $ventas2009[0],
    $registro[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],
    ),
    );
    $fecha=Date(“Y/m/d”);
    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,
    ));
    echo $chart;
    ?>

  • @ansuka: Probé tu código y efectivamente no mostraba nada en el gráfico. El error que detecté fue en esta parte:

    while($registro=mysql_fetch_array($resultado))
    {
    $empresa[$i]=$registro[“Empresa”];
    $ventas2008[$i]=$registro[“Ventas_2008”];
    $ventas2009[$i]=$registro[“Ventas_2009”];

    $i++;
    }

    Si seguiste el ejemplo tal cual, tus campos debiesen ser: empresa, ventas_2008 y ventas_2009, con minúscula al principio. Luego de cambiarlo acá pude ver el gráfico sin problemas, así que ojo con eso.

    Cualquier duda, por favor avísanos.

    Saludos!

  • excelent, muchas gracias…
    Pero ahora tengo otro problema.
    tengo q graficar varios indicadores guardados en la base de datos, de los cuales la idea es ingresar nuevos indicadores y q al tiempo graficarlos.
    Ah y se deben reflejar en miles de pesos.
    No se como hacerlo, si alguien m puede ayudar le agradecería.

1 2 3 4 7

Deja un comentario

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