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