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

1
15360

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.

image001

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)…

image002

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í:

image003

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!!!

image004

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

image005

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).

1 COMENTARIO

  1. Hola, podrias indicarme como mostrar dos o mas graficos en la misma pagina? Necesito mostrar tres graficos que realizo utilizando esta herramienta, de tres tablas diferentes. Pero actualmente el usuario tiene que hacer tres click digamos para ver cada uno, uno por uno, quiero que en una pagina, los muestre los tres juntos. Se pueden mostrar asi?? Como? Muchas Gracias! Saludos!

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad