Gráficas con PHP y Open Flash Chart 2
En esta oportunidad veremos como generar gráficas profesionales con Open Flash Chart 2, este componente nos permite crear diferentes tipos de gráficas en Flash, entre las opciones que nos ofrece tenemos gráficas de barras, de lineas, de tortas (pies), etc.
Open Flash Chart es un software open source y esta bajo la licencia LGPL, por lo que como siempre recordamos es posible acceder al código y contribuir con el desarrollo del proyecto en la forma que ustedes quieran. La version 2 de Open Flash Chart esta desarrollada con Actionscript 3 y compilada con Flex.
Entre las principales características encontramos:
- tooltips en cada punto de la gráfica
- permite exportar la gráfica como imágen
- diferentes tipos de gráficas: lineas, barras, barras 3D, tortas, áreas y más.
- varias librerías disponibles (php, java, python, etc)
- carga de datos en formato JSON
Generar la gráfica desde PHP
En este ejemplo vemos como generar datos para la gráfica en forma dinámica, como siempre mostramos un ejemplo simple para que se entienda mejor, pero es claro que en una aplicación real el origen de los datos puede ser una base de datos, archivos, etc.
chat_test.php
<?php //incluimos la libreria para PHP include './php-ofc-library/open-flash-chart.php'; //datos de prueba $datos = array(1,2,3,4,5,6,7,8,9); //creamos el titulo de la grafica, en este caso la fecha de hoy $title = new title( date("D M d Y") ); //creamos las barras simples para la grafica $bar = new bar(); //seteamos los valores para la grafica $bar->set_values( $datos ); //creamos la grafica $chart = new open_flash_chart(); //agregamos el titulo y las barras $chart->set_title( $title ); $chart->add_element( $bar ); //generamos los datos en formato JSON echo $chart->toString(); ?>
Nótese que lo único que genera este script es una cadena de texto con formato JSON donde se encuentran todos los datos de la gráfica que queremos generar (colores, tipos, valores, etc), esto lo consigue mediante el método toString() de la última línea.
Para asociar este script con el código HTML debemos escribir lo siguiente:
grafica.html
<html> <head> <!-- usamos esta libreria javascript que viene incluida en la descarga --> <script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript"> swfobject.embedSWF("open-flash-chart.swf", "my_chart", "550", "200", "9.0.0", "expressInstall.swf", {"data-file":"chart_test.php"}); </script> </head> <body> <p>Prueba grafica</p> <div id="my_chart"></div> </body> </html>
Vemos que para generar el código usamos una librería javascript que es proporcionada por el autor del software, esto nos evita las molestias de escribir todo el código HTML para insertar un objeto Flash el cual es bastante entreverado y no nos aporta nada.
El objeto SWF acepta como parámetro el nombre del archivo que proporcionará los datos de la gráfica.
Para finalizar solo nos resta decir que es posible generar gráficas dinámicas con Open Flash Chart de forma profesional, simple y con un muy buen look. Además, el sitio oficial cuenta con excelente información y varios tutoriales que te ayudarán en tus futuros desarrollos.
Mas información:
