You are here:GeoTux»Geo-Blogs»GeoTux»Gráficas estadísticas de GeoTux con la librería Open Flash Chart

Estadísticas

Invitados: 40
Usuarios registrados: 3133
Usuarios en línea:
-
Registrados hoy:
-

Registro

Redifusión (RSS)

Blogs y Noticias:
Recibe las actualizaciones en Geo-Noticias y Geo-Blogs

Recibir por e-mail
Recibir Geo-Noticias y Geo-Blogs por e-mail

¿Qué es esto?

Martes 02 de Diciembre de 2008 06:03

Gráficas estadísticas de GeoTux con la librería Open Flash Chart

Written by  German Carrillo
Rate this item
(0 votes)

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/


Last modified on Jueves 29 de Septiembre de 2011 03:38

Comentarios  

 
0 # TENGO DUDAS CON UNA GRAFICA DE AREAivterck 25-06-2009 09:50
Hola estoy haciendo una grafica de area que se actualiza en tiempo real, en si la grafica ya esta creada sin embargo no se como hacerle para que definir puntos que no se muevan en el eje de las X. Mi eje de las X va del 9 al 15, ese es el horario. Si yo defino estos puntos por cada punto que vaya agregando se agrega asi 9,10,11....y no grafica los puntos intermedios 9.10,9.20....si pongo que tome los puntos directamente de mi tabla si lo hace sin embargo la grafica ocupa todo el espacion y se va "achicando" conforme van saliendo mas puntos. Mi idea es que los puntos queden fijos y vaya graficando poco a poco pero sin extender la grafica. No se si me explique.
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.
Responder | Responder con una citación | Citar
 
 
0 # =(ivterck 25-06-2009 09:52
//Incluimos la libreria generadora de graficas
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!!
Responder | Responder con una citación | Citar
 
 
0 # como poner una grafica de barras multiplesandrew 21-11-2011 19:42
buenas,
me gustaria poner una grafica de barra multiples por ejemplo:
Responder | Responder con una citación | Citar
 
 
0 # Re:tuxman 21-11-2011 21:37
Como esta?

http://teethgrinder.co.uk/open-flash-chart-2/bar-2-bars.php
Responder | Responder con una citación | Citar
 
 
0 # dudas!daviddd 27-07-2012 07:16
estuve viendo los codigos de la pagina de open flash chart, ya descargué el .zip y logre hacer funcionar los ejemplos que describen en el tutorial... pero no se como hacer funcionar los charts que ofrecen en su página, podría alguien ayudarme?
Responder | Responder con una citación | Citar
 

Escribir un comentario


Código de seguridad
Refescar

 

¿Dónde nos leen?