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, buenas. cómo se podría generar un pdf , en vez de que se dibuje en la página que genere un pdf con la gráfica.

  • vola de putos

  • hola me gusto,el ejemplo… pero tengo valores negativos menos de 0, como lo hago para que aparezcan estos valores…

  • Excelente aporte, ya había trabajado con la libreria de jpgraph y èsta me parece una buena alternativa, me gustaria saber si has trabajado con reportes en c sharp, apartir de una plantilla en word imprimir datos de un usuario…Salu2, sigue con estos perfectos tutoriales. Esto no va al tema, pero = me gusto sobre la pantalla interactiva, lo unico malo esk no he podido sincronizar el puntero. Ha de ser el bluetooth quero pensar que no es compatible…

  • Excelente aporte, tengo una duda. ya logre obtener los registros de la B.D y los agrego. En el eje Y van los valores en la grafica mayores de 100000, entonces no se logra distinguir los valores. Es decir como hago para aumentar esta propiedad: labelsXY??

  • Hola mi consulta es que deseo hacer un grafico lineal pero como en todo lo que he buscado me permite solo pasarle un array con los valores de x, y graficando los puntos en y pero quisiera graficar los puntos de x algo asi:

    valores x son tiempos osea desde las 5 de am a 23 pm pero con una scala de 3 min

    valores de y son paraderos domingo, juan 3, carlo 4….

    lo que quiero es graficar son los tiempos que llegan a esos paraderos mis omnibuses.

    (05:02,domingo),(05:05,juan 3),(05:02,carlo 4),(…,…),(..,…)

    eje y paraderos
    eje x tiempos

    me puedes ayudar ya que estoy dando vuelta en otras clases y no me permiten o no encuentro como hacerlo.

    desde ya te lo agradeceria.

  • necesito su ayuda por favor si mi consulta es la siguiente:

    select COUNT(productName),productLine FROM products group by productLine

    como debo de llenar los array
    saludos

  • ola necesito su ayuda

    como debo de llenar los array si mi consulta es esta

    select COUNT(productName),productLine FROM products group by productLine

    agradeceria su ayuda
    saludos

  • Creo q he llegado un poco tarde. Pero la respuesta a Carlos es la siguiente, es asunto de la ubicación del corchete.

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

    Gracias Xabadu por compartir esta información. Me fue de gran utilidad

  • Hola, he estado viendo un poco la libreria y me parece exelente. Solo tengo algunas consultas.

    Esta libreria funciona con internet o sin internet?

    Como harias un grafico de pastel con conexion a mysql?

    Espero sus respuestas y gracias por el aporte

1 2 3 4 5 6 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