Estadísticas

Clicky

Inicio

Articulos

Programacion

Creación de gráficas en PHP con 'Open Flash Chart'

Escrito por Javi

Jueves, 15 de Noviembre de 2007 00:14

Open Flash Chart

Open Flash Chart es un componente de código abierto (Open Source) liberado bajo licencia GPL que te permitirá hacer unas gráficas bastante elegantes dentro de tus aplicaciones en PHP. También es posible utilizar el componente desde Python, Perl y Ruby On Rails. Para este tutorial haremos uso de la versión Open Flash Chart 1.9.5, que podrás descargar desde su sitio web. Resaltar que este tutorial está basado en uno de los tutoriales que podréis encontrar en su web.

[Actualizado el 27 de Noviembre de 2007: Se ha añadido un ejemplo de gráfica a partir de datos de una base de datos MySQL]

Paso 1 - Instalación de ficheros

Descarga y descomprime el contenido del fichero .zip, en mi caso open-flash-chart-1.9.5.zip, y distribuye los ficheros de la siguiente forma:

Copia todos los ficheros a la carpeta raíz de tu sitio web.
Comprueba que el fichero open-flash-chart.swf está en la carpeta raíz de tu sitio web. En caso de necesitarlo, establece los permisos para estos ficheros de forma que el servidor web pueda acceder a ellos.

Nota: Al final del tutorial se muestra como modificar la ruta de los distintos ficheros.

Consejo: Intenta mantener las rutas lo más simples posible y cuando termines el tutorial mueve los ficheros a otra ubicación más adecuada. Esto te ayudará a encontrar errores debidos a rutas incorrectas.

Paso 2 - El Código

Comenzaremos creando un nuevo fichero .php en el que mostraremos una simple página “Hola Mundo”. Para ello copia el siguiente texto en el fichero y guárdalo como chart.php:

Prueba la página abriéndola en tu navegador habitual: http://tu.sitio.web.com/chart.php, o como en mi caso http://localhost/chart.php, puesto que tengo un servidor local para las pruebas.

Cuando hayas comprobado que el paso anterior funciona, sustituye el código php (<?php ... ?>) por el que se cita a continuación:

<?php
// Código que crea el objeto Flash
include_once 'php-ofc-library/open_flash_chart_object.php';
open_flash_chart_object( 500, 250, 'http://'.
$_SERVER['SERVER_NAME'] .'/chart-data.php', false );
?>

Esto establecerá los parámetros de altura y de anchura del Flash resultante así como la URL del fichero de datos. De momento ingnóralos, guarda el fichero y pruébalo en tu navegador. En mi caso solo muestra la ruta del fichero de datos. Para ver que todo está correcto abre el código fuente de la página y comprueba que contenga algo parecido a esto:

Paso 3 - El fichero de datos

El funcionamiento de Open Flash Chart es sencillo, primero descarga el fichero de datos, lo lee y después lo muestra como una gráfica. El fichero de datos tiene un formato específico muy sencillo, que nos posibilita escribirlo a mano. En este caso lo generaremos con la ayuda de PHP.

Para ello vas a crear un nuevo fichero en la carpeta raíz de tu sitio web con el siguiente contenido:

<?php
// generate some random data:
srand((double)microtime()*1000000);
$max = 50;
$data = array();
for( $i=0; $i<12; $i++ )
{
$data[] = rand(0,$max);
}
// use the chart class to build the chart:
include_once( 'php-ofc-library/open-flash-chart.php' );
$g = new graph();

// Spoon sales, March 2007
$g->title( 'Spoon sales '. date("Y"), '{font-size: 26px;}' );
$g->set_data( $data );
// label each point with its value
$g->set_x_labels( array('Jan','Feb','Mar','Apr','May','Jun','Jul',
'Aug','Sep','Oct','Nov','Dec' ) );
// set the Y max
$g->set_y_max( 60 );
// label every 20 (0,20,40,60)
$g->y_label_steps( 6 );
// display the data
echo $g->render();
?>

Guárdalo como generate-data.php y prueba a abrirlo en tu navegador. Deberías obtener un texto como el siguiente:

&title=Spoon sales 2007,{font-size: 26px;}&
&x_axis_steps=1& &y_ticks=5,10,6&
&line=3,#87421F&
&values=19,19,0,35,45,1,21,0,27,33,45,3&
&x_labels=Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec&
&y_min=0& &y_max=60&

Este es el formato en el que hay que pasarle los datos a Open Flash Chart, así que copia este texto y pégalo en un fichero nuevo, al que nombrarás como chart-data.php. Como podrás observar este nombre de fichero es el que utilizamos anteriormente en la funcion que creaba el objeto en Flash.

open_flash_chart_object( 500, 250, 'http://'.
$_SERVER['SERVER_NAME'] .'/chart-data.php', false );

Si todo es correcto al abrir esta primera página que creaste (http://tu.sitio.web.com/chart.php) deberías ver una gráfica con el título 'Spoon sales'.

Por supuesto podrás mover los ficheros a otra carpeta dentro de tu sitio web, para lo que tendrás que tener en cuenta lo siguiente:

Modificar la declaracion include_once en tu codigo php.
Modificar el parámetro URL pasado a la función open_flash_chart_object para reflejar la nueva ruta.
Modificar las líneas de código del fichero php-ofc-library/open_flash_chart_object.php para modificar la ruta base de la cual se obtiene el fichero open-flash-chart.swf

Podrás encontrar más información y ejemplos de uso de Open Flash Chart en su sitio web.

Ejemplo de gráfica a partir de datos de una base de datos MySQL

[Añadido el 27 de Noviembre de 2007, a petición de un lector]

En primer lugar vamos a crear un fichero al que denominaremos datafromdb.php con el contenido que se detalla a continuación:

<?php
// PASO 1 - Obtención de los datos desde una
// base de datos MySQL
// Abre la base de datos
// Tendrás que adaptar los parametros pasado
// a mysql_connect y a
// mysql_select_db a los de tu servidor y
// base de datos
$db = mysql_connect("localhost", "root","")
or die("Imposible conectar a la base de datos");

mysql_select_db("ofctest", $db)
or die("Imposible consultar la base de datos");

// Consulta la tabla
$res = mysql_query("select * from datospie",$db)
or die("Sentencia SQL incorrecta");
$data = array();
$labels= array();
// Itera sobre el resultado de la consulta para
// obtener los campos que necesitamos para
// generar la gráfica
while( $row = mysql_fetch_array($res) ){
// Añade los valores de cada fila al array de
// datos que le pasaremos a Open Flash Chart
$data[] =$row[2];

// Añade las etiquetas de cada fila al array de
// etiquetas que le pasaremos a Open Flash Chart
$labels[] =$row[1];
}
// Cerramos la conexión con la base de datos
mysql_close($db);

// PASO 2 - Creacion de la grafica
// Creamos el objeto Gráfica
include_once( 'php-ofc-library/open-flash-chart.php' );
$g = new graph();

// Gráfica con 60% de transparencia
$g->pie(60,'#505050','#000000');

// Le pasamos 2 arrays, uno con los datos y otro
// con las etiquetas
$g->pie_values( $data, $labels );

// Se asigna los colores para los datos
$g->pie_slice_colours(
array('#d01f3c','#356aa0','#C79810') );
$g->set_tool_tip( '#val#%25' );
$g->title( 'Grafica desde BD',
'{font-size:18px; color:#d01f3c}' );

echo $g->render();
?>

Como puedes observar, este código está compuesto de dos apartados. En el primero abrimos la base de datos y realizamos una consulta de los datos apropiados, los cuales almacenaremos en arrays. Posteriormente pasaremos estos arrays a las funciones de creación de la gráfica para generar el gráfico adecuado.

Solo nos queda llamar a la función open_flash_chart_object con los parametros adecuados para dibujar nuestra gráfica:

Si tienes alguna duda sobre este ejemplo, no lo dudes, dejanos un comentario y te ayudaremos en lo que podamos.

Tags See All Tags

flash

php

programacion

Comentarios (22) add comment

RSS feed Comments

monk.e.boy: ... http://teethgrinder.co.uk/open-flash-chart/

Thanks for the great tutorial!!

11-09-08

Javi_: ... http://www.leemiblog.com

Thanks to you for Open Flash Chart!

11-09-08

emerson: ... http://www.asistenciayserviciosintegralesensalud.com

hola
no soy un experto pero ando realizando un proyecto y requiero realizar una grafica de torta con unos datos extraidos de una base y pues la verdad he leido el tutorial del la pagina web pero no entiendo muy bien como se hace para obtener los datos, entindo la armada del archivo que es muy similar a como se hace en php/swf charts
agradezco su ayuda

11-09-08

Javi_: ... http://www.leemiblog.com

Hola emerson, ando un poco liado estos días, pero intentaré ayudarte con un ejemplo lo antes posible.

11-09-08

Javi_: ... http://www.leemiblog.com

He actualizado el artículo a petición de emerson. He añadido al final del mismo un ejemplo en el que se crea una gráfica de tipo tarta y en el que se obtienen los datos a partir de una tabla en una base de datos MySQL.

11-09-08

Janckos: ... http://janckos.com

Ya probe el "Ejemplo de gráfica a partir de datos de una base de datos MySQL" y esta super bueno, todo perfecto. Pero necesito graficar en tipo barras, que parámetro del código debo modificar?

11-09-08

Javi_: ... http://www.leemiblog.com

Hola Janckos. Para crear una gráfica de barras modifica datafromdb.php y cambia el codigo de la PARTE 2 por este:

include_once( 'php-ofc-library/open-flash-chart.php' );
$g = new graph();

$g->title( 'Grafica desde BD', '{font-size:18px; color: #d01f3c}' );
$g->set_data($data);
$g->bar_filled( 20, '#9933CC', '#8010A0', 'Porcentajes de uso', 10 );

$g->set_x_axis_steps( 1 );
$g->set_x_label_style(10, '#9933CC', 0, 1);
$g->set_x_labels($labels);

$g->y_label_steps( 4 );
$g->set_y_max( 60 );
$g->set_y_legend( 'Open Flash Chart', 12, '#736AFF' );

echo $g->render();

Espero que te ayude.

11-09-08

Janckos: ... http://www.janckos.com

Muchas gracias por tu ayuda Javi =) quisiera ejecutar ese codigo desde un *.java como insertaría ese pedazo de código .php en un código java? espero puedas ayudarme, disculpa las molestias.

11-09-08

Kathleen: ...

Hola Quisiera saber en que otro sitio o si me pueden ayudar ustedes mismos a cambiar a otros tipos de graficas como los de las tortas o las barras y como cambiar los colores de las graficas y ese tipo de cambios para personalizar las graficas Gracias de antemano

11-09-08

Gramos: ...

Encuentro super buena herramienta esta OFC, lo instale en un servidor con SO windows y funciono altiro, pero ahora lo quiero implementar para un servidor con Centos (Linux) y no me muestra el grafico. Igual sale el mensaje del paso 2. Si pudieran ayudarme, les estare muy agradecido.

PD: excelente tutorial... smilies/smiley.gif

11-09-08

Gramos: ...

Hola... Ya logre hacerlo funcionar en el servidor linux, pero ahora tengo otro problema... segui el ejemplo que tienes aqui pero no me funciona... Si quieres te puedo enviar el codigo a algun correo para ver que puede ser

... Gracias

11-09-08

Javi_: ... http://www.leemiblog.com

Hola Gramos. En primer lugar disculparme por la tardanza en responder (tu primer mensaje acabo de verlo hoy, y me alegro de que hayas podido solucionarlo).
¿Cabría el código en cuestión en un comentario? ¿Con que servidor web estás realizando las pruebas? Yo utilicé Apache 2 bajo Ubuntu GNU/Linux.

11-09-08

Mikelin: ...

Hola. He leído este tutorial y el original en inglés y descubrí que en inglés me marca un fallo; por una línea, no importa, gracias a tu manual, ya descubri que es. Pero, estoy haciendo una página donde los usuarios escriban unos datos, piquen unas casillas y con esos datos se genere el gráfico, y me gustaría ponerlo en joomla para hacer un bonito CMS (estoy investigando también como pasarlo de mi PC a un servidor, pues ahorita hago solo pruebas), pero soy totalmente nuevo en esto de la programación, la página HTML la puedo hacer, con sus post y las casillas para seleccionar, ¿Pero los datos se pueden guardar en mysql y que luego el open-flash-chart los lea?, pero según veo el archivo se guarda en el servidor ¿y si entran muchos usuarios?.

Se que probablemente es algo básico, y no creas que no he investigado, llevo semanas leyendo y leyendo; también veo que estás muy ocupado, si sólo me pudieras dar una orientación te lo agradecería. Gracias, nuevamente.

11-09-08

emerson: ...

hola a todos tenia abandonado el proyecto de la grafica de torta pero ahora lo tengo que retomar. he intentado realizar las graficas que aparecen en este tutorial pero la verdad no he podido ya que al tratar de ver el fichero de datos me sale que si quiero descargar este archivo. he copiado los archivos tal cual como aparecen aca y no logro hacerlo funcionar, lo mismo sucede con el ejemplo que muy amablemente te tomaste el tiempo de armar para mi pero no logro hacerlo funcionar... una pregunta en el ejemplo de los datos extraidos de la base de datos en las variables $data y $labels en las llaves coloco el nombre del campo que contiene los datos .
muchas gracias por su ayuda

11-09-08

RunSaber: ...

Hola amigos, yo antes de leer este artíulo ya lo había usado y me funciona muy bien, también lo uso con datos de MySQL y es el generador de gráficos más simple que he visto y más encima gratuito....

Sólo tengo problemas ahora con los extra Tooltip en un Graph 3D, pero lo demás funciona de maravillas....

11-09-08

RunSaber: ...

Se me olvidaba decirles: la última versión (1.9.7), trae las librerías para PHP, Java, Rubi, Perl, y .NET, así que eso soluciona la vida de muchos...

11-09-08

Adolfo Trancoso: ... http://www.hablaip.cl

Esta claro que es el sistea de graficos mas facil de utilizar
habia bajado un monton de codigo pero esto salio muy practico
algunas tips. cuando llamen el codigo que genera externamente los valores
?hora y fecha asi no tiene problema con la cache

Saludos

11-09-08

Thoraso: ...

Hola amigos, la verdad, estoy recien empezando con esto, necesito en forma urgente realizar gráficos desde una base de datos oracle, pero el primer ejemplo no me funciona...

Si aguien me echa una mano lo agradecería.. saludos...

PD: instale el wamp, y tengo los ejemplos en el directorio www donde instale la aplicacion open chart, pero cuando veo la pagina solo me muestra texto:
"&title=Spon sales 2008,{font-size: 26px;}& &x_axis_steps=1& &y_ticks=5,10,6& &line=3,#87421F& &values=& & x_labels=Enero,Febrero,Marzo,Abril,Mayo,Junio,Julio,Ago sto,Septiembre,Octubre,Noviembre,Diciembre& &y_min=0& &y_max=60& "
Saludos

11-09-08

Javi_: ... http://www.leemiblog.com

¿A que dirección estás apuntando el navegador? Si estás apuntando a
http://localhost/chart.php y l...http://'.
$_SERVER['SERVER_NAME'] .'/chart-data.php', false )smilies/wink.gif debería funcionar

11-09-08

sergio.vargas: ...

He hecho el uso de Open Flash Chart a partir de tu articulo el cual me fue de gran ayuda, y con algo de practica y suerte pude hacerlo correr con una conexión a base de datos y mas aun ponerlo en otra carpeta diferente al root, pero entonces tengo una consulta casi duda...

Resulta que siempre me hace un table de resultados después de ke gráfica el swf... hay alguna forma de deshabilitar esa función?

Te agredeceria una pronta respuesta

11-09-08

napster: ...

Hola Jankos como estas mi pana, viejo necesito un favor estoy realizando un sitio web para la compañia donde trabajo, y estube provando tus ejemplos con una base de datos y solamente se muestra el frame(es decir veo el marco pero nisiquiera me muestra los ejes), pero pero no la grafica, y tambien cundo le cambio los parametros a tu codigo es decir por lo menos cambiarle el nombre no funciona quedan grabados los que aparecen en tu ejemplo.

Por favor necesito ayuda de verdad

11-09-08

Katas: ...