Open Flash Chart es una librería de código abierto que permite realizar gráficas estadísticas en Flash usando lenguajes de programación de servidor. A continuación algunos ejemplos con datos de GeoTux.
Con esta librería se pueden realizar gráficas interactivas de barras, de tortas, de líneas y de dispersión, entre otras. Para ello se puede emplear cualquiera de los siguientes lenguajes de programación: PHP, Ruby, Perl, Python, .NET o Java.
Desde el pasado 6 de noviembre de 2008 se lanzó la versión 2 Hyperion del proyecto, cuya licencia es LGPL (La versión 1 de la librería tiene licencia GPL). Desde la versión 2 se trabaja con el formato JSON (JavaScript Object Notation) para almacenar los datos a graficar.
Esta es una gráfica de barras de nuevos usuarios en GeoTux por mes:
El código PHP que produce la gráfica es este:
<?php $mp = mysql_connect("host","usuario","clave"); mysql_select_db("bd"); $query = "SELECT count(id), DATE_FORMAT(registerDate,'%b %y') AS fecha FROM tabla_usuarios WHERE 1 GROUP BY fecha ORDER BY registerDate "; $recurso = mysql_query($query); $numUsuarios = array(); // Número de usuarios $fecha = array(); // Fecha de registro del usuario
while ($row= mysql_fetch_array($recurso)){ $numUsuarios[] = 0+$row[0]; $fecha[] = $row[1]; }
//Configuración de la gráfica de barras include 'php-ofc-library/open-flash-chart.php';
$title = new title( "Nuevos usuarios en GeoTux"); $title->set_style( "{font-size: 17px; font-family: Trebuchet MS, Verdana, Arial;
font-weight: bold; color: #3fb044; text-align: center;}" );
$x = new x_axis(); $x->set_colour( '#ff7d14' ); $x->set_grid_colour( '#faffae' );
$x_labels = new x_axis_labels(); $x_labels->set_steps( 2 ); $x_labels->set_vertical(); $x_labels->set_colour( '#858585' ); $x_labels->set_labels( $fecha); $x->set_labels( $x_labels);
$y = new y_axis(); $y->set_range( 0, 40, 5 ); $y->set_colour( '#ff7d14' ); $y->set_grid_colour( '#faffae' );
$tooltip = new tooltip(); $tooltip->set_hover();
$bar = new bar(); $bar->set_values( $numUsuarios );
$chart = new open_flash_chart(); $chart->set_title( $title ); $chart->add_element( $bar ); $chart->set_x_axis($x); $chart->set_y_axis($y); $chart->set_bg_colour( '#e6ebed' ); $chart->set_tooltip( $tooltip );
echo $chart->toString(); ?>
|
Esta es una gráfica de torta usando los datos de la última Geo-Encuesta:
El código que la genera es:
<?php //Extraer los datos de MySQL $mp = mysql_connect("host","usuario","clave"); mysql_select_db("bd"); $query = " SELECT hits, text FROM tabla_encuestas WHERE pollid = '7' AND text <> '' "; $recurso = mysql_query($query); $hits = array(); //Número de votos $texto = array(); //Nombre de la opción de la encuesta while ($row= mysql_fetch_array($recurso)){ $hits[] = 0+$row[0]; $texto[] = $row[1]; }
// Configuración de la gráfica de tortas include '../libreria/php-ofc-library/open-flash-chart.php';
$title = new title( "¿Qué buscas en una herramienta SIG de escritorio?"); $title->set_style( "{font-size: 15px; font-family: Trebuchet MS, Verdana, Arial;
font-weight: bold; color: #3fb044; text-align: center;}" );
$pie = new pie(); $pie->set_start_angle( 35 ); $pie->set_animate( true ); $pie->set_tooltip( '#val# of #total#<br>#percent#' ); $pie->set_values( $hits );
$valores = array(); for ($i=0; $i<count($texto);$i++) $valores[] = new pie_value($hits[$i],$texto[$i]); $pie->set_values( $valores );
$chart = new open_flash_chart(); $chart->set_title( $title ); $chart->add_element( $pie ); $chart->set_bg_colour( '#e6ebed' );
echo $chart->toString(); ?>
|
Y por último, una gráfica de líneas con los datos de nuevas noticias en GeoTux por mes:
Y su código PHP:
<?php
// Extraer los datos de MySQL
$mp = mysql_connect("host","usuario","clave"); mysql_select_db("bd"); $query = " SELECT count( id ) , DATE_FORMAT( created, '%b %y' ) AS fecha FROM tabla_noticias
WHERE sectionid = '3' GROUP BY fecha ORDER BY created "; $recurso = mysql_query($query); $numNoticias = array(); // Número de noticias $fecha = array(); // Fecha de publicación de la noticia
while ($row= mysql_fetch_array($recurso)){ $numNoticias[] = 0+$row[0]; $fecha[] = $row[1]; }
// Configuración de la gráfica de líneas include 'php-ofc-library/open-flash-chart.php';
$title = new title( "Nuevas noticias en GeoTux"); $title->set_style( "{font-size: 17px; font-family: Trebuchet MS, Verdana, Arial;
font-weight: bold; color: #3fb044; text-align: center;}" );
$x = new x_axis(); $x->set_colour( '#ff7d14' ); $x->set_grid_colour( '#faffae' );
$x_labels = new x_axis_labels(); $x_labels->set_steps( 2 ); $x_labels->set_vertical(); $x_labels->set_colour( '#858585' ); $x_labels->set_labels( $fecha); $x->set_labels( $x_labels);
$y = new y_axis(); $y->set_range( 0, 15, 3 ); $y->set_colour( '#ff7d14' ); $y->set_grid_colour( '#faffae' );
$tooltip = new tooltip(); $tooltip->set_hover();
$line_dot = new line_dot(); $line_dot->set_values( $numNoticias ); $line_dot->set_halo_size( 0 ); $line_dot->set_width( 2 ); $line_dot->set_dot_size( 4 );
$chart = new open_flash_chart(); $chart->set_title( $title ); $chart->add_element( $line_dot ); $chart->set_x_axis($x); $chart->set_y_axis($y); $chart->set_bg_colour( '#e6ebed' ); $chart->set_tooltip( $tooltip );
echo $chart->toString(); ?>
|
La librería puede descargarse de este enlace: http://teethgrinder.co.uk/open-flash-chart-2/downloads.php
Además del código PHP, es necesario el siguiente código JavaScript en la página que contendrá las gráficas:
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "grafica_barras", "500", "200", "9.0.0",
"expressInstall.swf", {"data-file":"barras.php", "loading":"Cargando datos..."} ); swfobject.embedSWF("open-flash-chart.swf", "grafica_pie", "450", "300", "9.0.0",
"expressInstall.swf", {"data-file":"pie.php", "loading":"Cargando datos..."} ); swfobject.embedSWF("open-flash-chart.swf", "grafica_linea", "500", "200", "9.0.0",
"expressInstall.swf", {"data-file":"linea.php", "loading":"Cargando datos..."} ); </script>
|
Donde "grafica_barras", "grafica_pie" y "grafica_linea" son identificadores de elementos DIV en la página web.
Para mayor información puedes consultar los tutoriales del proyecto.
FUENTE:
Página oficial de Open Flash Chart: http://teethgrinder.co.uk/open-flash-chart-2/
comments
Otra es que mis valores tienen 3 decimales y en el tooltip no puedo hacer ke me muestre los 3 decimales tan solo 2, alguna sugerencia?
Asi mismo me gustaria que el eje de las Y fuera dinamico, es decir que el rango creciera o decreciera de acuerdo a los valores que mi tabla le pase.
Los valores estas siempre entre 18000 y 35000., alguna sugerencia?
Dejo mi codigo por si tienen alguna sugerencia, se los agradecere mucho.
include 'chart/php-ofc-library/open-flash-chart.php';
//Hacemos la conexión a nuestra base de datos
$con = mysql_connect('localhost', 'root', '');
$db = mysql_select_db ('graficas', $con);
$result = mysql_query("select * from ipc");
//Metemos en un array los datos, que usaremos para graficar.
$data = array();
$id = array();
while($row = mysql_fetch_arr ay($result))
{
$data[] = floatval($row['ipc']);
$id[] = $row['id'];
}
//Creamos un nuevo objeto de grafica
$chart = new open_flash_char t();
//Creamos un titulo a nuestra grafica, le aplicamos un formato y lo agregamos a nuestra grafica
$title = new title( 'IPC' );
$title->set_style( "{font-size: 12px; color: #6F6E6D; text-align: center;}" );
$chart->set_title( $title );
$chart->set_bg_colour( '#FFFFFF' );
//Especificamos que tipo de grafica queremos, en este caso de area y le pasamos los valores de nuestra base de datos
$area = new area();
$area->set_values( $data );
$area->set_tooltip( $data );
$area->set_colour( '#610B0B' );
$area->set_fill_colour ( '#FBE736' );
$area->set_fill_alpha( 1 );
$chart->add_element( $area );
//creamos las etiquetas del eje de las X y las llenamos con nuestros datos de la base de datos
$x_labels = new x_axis_labels() ;
$x_labels->set_steps( 1 );
$x_labels->set_colour( '#6F6E6D' );
$x_labels->set_vertical();
$x_labels->set_labels( $id );
//creamos el eje X
$x = new x_axis();
//$x->set_colour( '#A2ACBA' );
$x->set_grid_colour ( '#C9C9C9' );
$x->set_offset( false );
$x->labels=$id;
$x->set_steps(1);
// Add the X Axis Labels to the X Axis
$x->set_labels( $x_labels );
//lo desplegamos en la grafica
$chart->set_x_axis( $x );
//si queremos mostrar una leyenda en el eje de las X por ejemplo, aqui lo agregamos
/*$x_legend = new x_legend( date("H:i") );
$x_legend->set_style( '{font-size: 15px; color: #778877}' );
$chart->set_x_legend( $x_legend );*/
//agregamos el eje Y
$y = new y_axis();
$y->set_range( 22000, 22500,100 );
$y->set_grid_colour ( '#C9C9C9' );
$y->set_offset( false );
$y_labels = new y_axis_labels() ;
$y_labels->set_colour( '#6F6E6D' );
$y->set_labels( $y_labels );
$chart->add_y_axis( $y );
$t = new tooltip( "hi" );
$t->set_shadow( false );
$t->set_stroke( 1 );
$t->set_colour( "#6E604F" );
$t->set_background_ colour( "#BDB396" );
$t->set_title_style ( "{font-size: 14px; color: #CC2A43;}" );
$t->set_body_style( "{font-size: 10px; font-weight: bold; color: #000000;}" );
$chart->set_tooltip( $t );
//generamos la grafica completa
echo $chart->toPrettyString( );
//listo!!
me gustaria poner una grafica de barra multiples por ejemplo:
http://teethgrinder.co.uk/open-flash-chart-2/bar-2-bars.php
RSS feed for comments to this post