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:
Esto establecerá los parámetros de altura y de anchura del Flash resultante así como la URL del fichero de datos. De momento ignó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:
// 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:
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.
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’.
- 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:
<html>
<head>
</head>
<body>
<?php
// Código que crea el objeto Flash
include_once ‘php-ofc-library/open_flash_chart_object.php’;
open_flash_chart_object( 400, 250,
‘http://’. $_SERVER['SERVER_NAME'] .
‘/proyectos/tutorial-ofc/datafromdbpie.php’, false);
?>
</body>
</html>
Si tienes alguna duda sobre este ejemplo, no lo dudes, dejanos un comentario y te ayudaremos en lo que podamos.
Amigo,
necesito un ejemplo de como mostrar los datos de una base de datos con open flash…
por favor termina el artículo que quedo cortado cuando iniciabas el ejemplo, gracias
Ya esta completo el articulo; no se muy bien porque pero faltaba un trozo. Perdón por las molestias.
Hola, al fin alguien publica lo que necesitaba, nada mas que necesito unas variaciones,
tengo una tabla con 12 columnas en total, 1 de ellas es mes y la otra resultado, por ejemplo:
Mes | Resultado
———————-
enero | 98
febre | 67
marzo | 89
etc etc etc tec hasta diciembre, como puedo hacer para que me grafique el mes de marzo por ejemplo y vengan incluidos los meses anteriores para que me muestre la diferencia?
de ante mano muchas gracias =)
Hola… estoy haciendo el ejemplo sin conectar a la base de datos pero al momento de mostrar la pagina ésta me sale en blanco… y pues la verdad no he cambiado rutas… lo tengo tal cual… en un servidor local…
será que tengo que estar conectado a Internet?…
Hola he echo el segundo ejemplo de donde se extraen los datos pero tengo un problema en cuanto ala estructura de la tabla , me marca un error al momento de conectarla, si me podrias explicar la estructura que necesita la tabla porfavor
de antemano agradesco tu tiempo
Estimado, mi pregunta es si sabes majejar los decimales del punto cuando pones el mouse sobre el grafico, estoy manejando un volumen importantes de datos en el grafico y decidi poner la hora como decimal de 4 digitos pero solo me muestra 2.
saludos.
me sale este error
Fatal error: Class ‘graph’ not found in C:\AppServ\www\grafico\chart-data.php on line 16
que debo modificar??
claudia ese error pasa cuando no tienes bien dirigidas tus direcciones, revisa donde lo esstas direccionando y en que carpeta se encuentra…
jmpr al referirse crear un nuevo fichero es crear un nuevo archivo…..
ya lo vi, tenias razon. muchas gracias
Yo tengo la ruta bien puesta pero me sigue saliendo el mismo error, alguna otra causa posible?
hola.. no estoy muy familiarizado con las graficas me intereza realizar graficas mandando llamar datos desde una base de datos… y m tope con esta pagina k habla sobre lo k m intereza… descargue el open-flash-chart-1.9.5 y lo copie a una carpeta de mi www del wamp y quise probar haciendo los ejemplos que vienen en este apartado solo k no m queda muy claro a k se refieren con crear un nuevo fichero.php no se como se crea o donde tengo k guardar los documentos para k funcionen.. si tienen k estar en la carpeta donde se decomprimio el open-flash-chart-1.9.5 si me pueden ayudar mil graxias..
crear fichero = click derecho->nuevo->documento de tento…
y le cambias la extencion…
la estructura la das tu….
saludos.
tengo otra duda… tengo que pasar unos valores desde un formulario para poder armar el grafico… que me recomiendan que puedo hacer??
con un include que me rescate esas variables puede ser suficiente??
tienes que poner tus datos dentro de un array, existen varias formas de pasar esa variable al grafico, depende de como lo estes haciendo o como te acomode mas.
si queres enviame un mail koke_esco@hotmail.com saludos…..
buenas tardes me gustaría saber si ustedes tienen la información de como dibujar los datos de una base de datos mysql en una imagen gif con ayuda de php
hay alguna forma de “reformatear” los numeros?? tengo resultados con miles (123,456), y los quiero con punto (123.456)
Quiero que los puntos del eje y me muestre decimales con 12 digitos, como puedo hacer esto? gracias
Primero gracias por tu guía
Al crear el objeto flash el php dice:
Failed opening ‘php-ofc-library/open_…. php’ (include_path=’.;C:\php5\pear’)…
He leido que cambiando en php.ini ‘register_globals’ de off a on se soluciona.
Pero tras cambiarlo sigue diciendo lo mismo.
Que tengo que hacer?
Gracias
Hola juanpc.
El problema segun veo es que lo estas clocalndo en un path equivocado. Tine que estar en el path relativo a tu sitio. Por ejemplo si tu aplicacionesta en : http://www.tuWevServer.com/tuAplicacion/ El include debe de ser: include_once ‘php-ofc-library/open…php’
Me parece muy bien este tipo de graficos, tengo dos preguntas:
1º.- No me gunciona con Internet Explorer
2º.- Se puede utilizar en vez de una tabla un fichero de texto con numeros?
Hay, que problemazo, yo no he logrado hacer ningun grafico como otros, necesito hacer un cuadro de mando integral, para eso necesito hacer graficos que me grafiquen la informacion pero nada ni con el ejemplo, que debo hacer, por favor necesito ayuda
Ya manejo algo este tipo de graficas, pero mi duda es como realizar un grafico de barras apiladas.
Gracias
A mi e da que me esta cargando , pero no me sale nada, me pudieras decir de donde eres, por si puedo hacerte alguna pregunta ante cualquier duda