icono_twiter
Daniel Hernandez del Peso

Consultor tecnológico de desarrollo de proyectos informáticos.

Ingeniero en Informática

Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo, factoría y formación

Somos expertos en Java/J2EE

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2008-02-29

Tutorial visitado 9.817 veces Descargar en PDF
Generación automática de gráficas en un web

Generación automática de gráficas en un web

Introducción

Como habéis podido ver, hace no mucho en Adictos al Trabajo os propusimos comparar vuestro salario con el mercado informático... y os propusimos una serie de gráficas como forma de analizar los resultados.

El objetivo de este tutorial no es explicaros exhaustivamente cómo funciona la biblioteca usada, sino simplemente presentarosla y, de paso, compartir mis primeras impresiones tras su uso.

La razón de que no profundice más en el tema es que en la propia página oficial del producto ya hay ejemplos bien detallados de cada tipo de gráfica. Cierto que están en inglés, pero con un ingles básico te enteras de todo lo necesario y si no... con copiar y pegar el código de los ejemplos te puedes hacer una idea...

Descarga de la biblioteca

Si habéis estado consultando las gráficas, comprobaréis que el producot se llama Open Flash Chart y en su página web, a la que os he incluido el enlace, tenéis toda la información.

A la izquierda, en el menú vertical,podéis ver (pongo sólo lo más interesante):

  • Tutoriales para empezar a trabajar
  • Todos los tipos de gráfica (charts) que podéis crear, cada uno con su correspondiente ejemplo
  • Documentación de las funciones para trabajar con los ejes X e Y
  • Cómo manejar los tooltips
  • Como usar JavaScript para mejorar nuestros gráficos
  • El enlace de descarga.

Lo más interesante, los gráficos y la sección de JavaScript, especialmente la parte de AJAX para recargar la tabla sin necesidad de mandar toda la página al servidor... y por supuesto, la página de descarga.

Descargamos y descomprimimos la última versión (a fecha del tutorial, la 1.9.7)...

Como podéis ver, aunque todos los ejemplos de la web están orientados a PHP (y mi experiencia con Open Flash Chart está limitada a PHP), este producto está preparado para integrarse con otros lenguajes, como PERL, Java, C# o Ruby...

Realmente, y esa es una de sus ventajas desde mi punto de vista, está preparado para integrarse con cualquier lenguaje, ya que lo importante es el objeto flash (“open-flash-chart.swf”) que viene en la distribución.

Los datos (y toda la información del grafico: tipo, colores, etiquetas de los ejes...) se pasan a dicho objeto como texto plano, cuyo formato podéis ojear en la carpeta “data files, y la forma de generarlo da igual...

Vale, pero... ¿cómo se usa?

Ya tenemos todo.. ¿cómo empezamos? Copiando un ejemplo...

Voy a usar el ejemplo “Sketch bars”, tal cual lo encontramos en la página

Para el ejemplo hacen falta dos páginas PHP, una para la gráfica (ejemplo-1.php) y otra para los datos (ejemplo-2.php)

ejemplo-1.php

<?php include_once 'ofc-library/open_flash_chart_object.php';
open_flash_chart_object( 500, 260, 'http://'. $_SERVER['SERVER_NAME'] .'/open-flash-chart/gallery-data-44.php' );
?>

ejemplo-2.php

<?php

 

include_once(
'ofc/php-ofc-library/open-flash-chart.php' );

// generate some random
data

srand((double)microtime()*1000000);

$bar = new bar_sketch( 55,
6, '#d070ac', '#000000' );

$bar->key( '2006', 10 );

for( $i=0; $i<10; $i++ )

$bar->data[] =
rand(2,9);

$g = new graph();

$g->title( 'Sketch',
'{font-size:20px; color: #ffffff; margin:10px; background-color: #d070ac;
padding: 5px 15px 5px 15px;}' );

$g->bg_colour =
'#FDFDFD';

 

 

//

// add the bar object to
the graph

//

$g->data_sets[] = $bar;


$g->x_axis_colour(
'#e0e0e0', '#e0e0e0' );

$g->set_x_tick_size( 9
);

$g->y_axis_colour(
'#e0e0e0', '#e0e0e0' );

$g->set_x_labels( array(
'January','February','March','April','May','June','July','August','September','October'
) );

$g->set_x_label_style(
11, '#303030', 2 );

$g->set_y_label_style(
11, '#303030', 2 );

 

$g->set_y_max( 10 );

$g->y_label_steps( 5 );

echo $g->render();

?>


Como veis, el código es el mismo de la página, actualizando unicamentelas rutas de los “include” de PHP y las URL's que aparecen en el código...

La estructura del ejemplo queda así:

 


Dentro de “ofc” está todo lo que hemos descargado, tal cual lo hemos visto más arriba

 

Debería funcionar... pero... ¡¡NO!! no funciona

Podemos comprobar que los datos se generan correctamente en “ejemplo-2.php”, o sea que el problema debe estar en “ejemplo-1.php”. Vamos a ver el código HTML que genera... (“Ver código fuente” en el navegador)

HTML Generado:

<script type="text/javascript" src="js/swfobject.js"></script>
<div id="flashcontent"></div>
<script type="text/javascript">
var so = new SWFObject("open-flash-chart.swf", "chart", "500", "260", "9", "#FFFFFF");
so.addVariable("data", "http%3A%2F%2Flocalhost%3A9191%2Fofc%2Fejemplo-2.php");
so.addParam("allowScriptAccess", "sameDomain");
so.write("flashcontent");
</script>
<noscript>
<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="500" height="260" id="ie_chart" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="open-flash-chart.swf?width=500&height=260&data=http%3A%2F%2Flocalhost%3A9191%2Fofc%2Fejemplo-2.php" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="open-flash-chart.swf?data=http%3A%2F%2Flocalhost%3A9191%2Fofc%2Fejemplo-2.php" quality="high" bgcolor="#FFFFFF" width="500" height="260"
name="chart" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" id="chart"/>
</object>
</noscript>

Vemos dos problemas:

  • Se incluye un fichero Javascript en una carpeta “js”que no tenemos (está dentro de la carpeta “ofc”)
  • Se busca la película flash en el mismo directorio que la página del ejemplo.

Si consultamos el código de la función “open_flash_chart_object”, vemos que se le puede indicar el directorio base mediante un parámetro, que por defecto tiene el valor '' (cadena vacía).

Modificamos, pues, “ejemplo-1.php” :

<?php


include_once
'ofc/php-ofc-library/open_flash_chart_object.php';


open_flash_chart_object(
500, 260, 'http://localhost:9191/ofc/ejemplo-2.php',false, 'ofc/' );


?>


Hemos agregado también un parámetro (justo detrás de la URL de los datos) indicando que no use JavaScript para pintar la gráfica...

 

et... ¡¡¡VOILA!!!

 


Ahora vamos a aligerar la carpeta “ofc” todo lo posible... o sea, a borrar cosas hasta que deje de funcionar... El resultado final es:


Postdata y reflexiones

Como postdata, tengoque agregar que es fundamental saber qué licencia tiene el producto (éste y cualquiera), saber a qué nos compromete esa licencia, leerla bien... antes de usarlo. Si alguien tiene alguna duda sobre las licencias (no es precisamente trivial) más comunes en productos de código abierto, software libre, etc, os recomiendo un tutorial de mi compañero en Autentia, Alejandro Pérez

En cuanto al producto en sí... es bueno, bonito y barato, fácil de usar, viene listo para integrarlo con distintos lenguajes, e integrarlo con otros es tan fácil (o tan difícil) como generar texto plano con el formato adecuado...

Para ponerele algún “pero”, el hecho de que se genere la gráfica en Flash hace que sea necesario un navegador que lo acepte (aunque hoy en día lo hace la mayoría, siempre y cuando se tenga instalado el plugin)

Conclusiones

Como siempre, desde Autentia intentamos ofreceros alternativas de libre distribución, de código abierto... y esta no va a ser la excepción... Una gráfica ayuda a interpretar los datos, y aquí os presentamos una biblioteca que permite dibujarlas facilmente y con unos resultados muy atractivos (y personalizables).

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL: