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:
Tags: desarrollo web, Flash, graficas, HTML, open source, Php
Información Bitacoras.com…
Valora en Bitacoras.com: 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,…
hola me sale este error
Open Flash Chart
IO ERROR
Loading test data
Error #2032: Error de secuencia. URL: http://localhost/q/chart_test.
This is the URL that I tried to open:chart_test.php
ayudame con este error
Hola Pablo, verifica en el archivo grafica.html que la ruta al script chart_test.php sea la correcta. Por lo que veo, chart_test.php esta dentro del directorio “q”, asegurate que la linea del html diga esto:
…
{”data-file”:”./q/chart_test.php”});
…
saludos, Juan.
soy nuevo en esto ise lo q comentaste pero me jenera un error cheque las librerias y hasta el ultimo comentario q isiste en tu foro pero me sigue generadndo o alo mejor es porq utlizo ubunto ayuda este es el error Open Flash Chart
IO ERROR
Loading test data
Error #2032
hola como puedo cambiar los datos de los ejes “x” “y” nada mas tiene del uno y del 10 quiro cambiarselo porfa ayuda
Hola zarate puedes cambiar los valores máximos y mínimos usando el siguiente codigo:
// crear el objeto para manejar el eje x
$x = new x_axis();
$x->set_range(5, 20); //seteamos el valor máximo y mínimo
….
….
//no olvides setear tu nuevo eje x en la gráfica
$chart->set_x_axis( $x );
de la misma forma puedes hacerlo para el eje y .
Espero haberte ayudado, saludos.
si me seirvio pero hay un pequño promblema lo q pasa al momento de modificar los ejes se distorciona porq el tamaño de la grafica no se hase grande y los valores se no se notan, y no manera q la garfica se haga granade con los valores q se le dan solamente funciona para datos pequeños
$w=new w();
$w->set_width(60);
$chart->set_width($w);
vi en el codigo para poder cambair el ancho pero falle en algo no se q sea aaa y el objeto ed de uno por uno el rango y se ditorciona en lo ejes jaaa muchass molestiass
$w=new w();
$w->set_width(60);
$chart->set_width($w);
vi en el codigo para poder cambair el ancho pero falle en algo no se q sea aaa y el objeto, y en rango y se ditorciona en lo ejes jaaa muchass molestiass