|
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: 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: <html>
<head>
</head>
<body>
<?php
echo 'Hola Mundo!';
?>
</body>
</html> 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: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/
cabs/flash/swflash.cab#version=8,0,0,0"
width="400" height="300" id="graph-2" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="open-flash-chart.swf?width=500&
height=250&data=http://teethgrinder.co.uk/open-flash-chart/
data-2.php"/><param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" /> <embed src=
"open-flash-chart.swf?width=500&height=250&data=
http://teethgrinder.co.uk/open-flash-chart/data-2.php"
quality="high" bgcolor="#FFFFFF" width="500" height="250"
name="open-flash-chart" align="middle" allowScriptAccess=
"sameDomain" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object> 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:
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.
 |
RSS feed Comments
... Gracias
