OPEN FLASH CHART 2 CON PHP Y MYSQL

OPEN FLASH CHART

Open flash Chart es una herramienta de código abierto (Open Source) liberado bajo licencia GPL, que te permite hacer gráficas en Flash a partir de datos en tu aplicación.

Tiene diversos tipos de usos y tiene librerías para utilizar integrar el sistema de gráficas Flash con la carga de datos en diversos lenguajes de programación web como PHP, .NET, Perl, Java, Python, Rubi y Google WebToolkit.

Lo más destacable para los desarrolladores que pretendan utilizar la segunda versión de Open Flash Chart es que la carga de datos se realiza por JSON, una notación especial de Javascript para la definición de objetos.

En las gráficas podrás cargar los datos que desees y elegir entre varios tipos de gráficas, colores, textos, etc.

EJEMPLO: GRÁFICA A PARTIR DE DATOS DE UNA BASE DE DATOS MYSQL

Como ejemplo de esta herramienta, vamos a realizar una gráfica con datos de empleados clasificados por el número de empleados que existe por cada departamento.

Paso 1 – Instalación de los archivos

  • Descomprimir y copiar todos los ficheros en una carpeta open_flash_chart2.
  • Copia la carpeta open_flash_chart2 en tu sitio web de prueba. Por ejemplo:

directorio open flash chart2

  • Podemos eliminar los archivos que no vamos a utilizar:

Archivos necesarios de la herramienta Open Flash Chart

Paso 2 – Creación de la base de datos

  • Vamos a crear la tabla “empleados” la estructura de la misma es:

CREATE TABLE empleados (
idempleado int NOT NULL auto_increment,
nombres varchar(32) NOT NULL,
departamento varchar(40)NOT NULL,
sueldo double,
KEY id(idempleado) ) ;

  • Ahora vamos a insertar algunos datos a la tabla:

INSERT INTO empleados VALUES (1, 'Juan Perez', 'Informatica',500.00);
INSERT INTO empleados VALUES (2, 'Laura Morales', 'Contabilidad',550.00);
INSERT INTO empleados VALUES (3, 'Luis Gutierrez', 'Administracion',850.00);
INSERT INTO empleados VALUES (4, 'Pedro Solar', 'Informatica',500.00);
INSERT INTO empleados VALUES (5, 'David Vilchez', 'Contabilidad',550.00);

Paso 3 – El código

  • Comenzaremos creando un nuevo fichero .php en el directorio “graficas” en el que realizaremos la conexión a base de datos, manipulación de datos y la configuración de la gráfica; para ello guardaremos el archivo como graficaEmpleado.php.
  • Primero, como vamos a usar la clase chart para construir los gráficos, vamos a realizar la siguiente declaración en nuestro archivo graficaEmpleado.php:

<?php
include('open_flash_chart2/php-ofc-library/open-flash-chart.php');
?>

  • Ahora vamos crear la clase graficaEmpleado y adicionar dos funciones para hacer la conexión y consulta a la base de datos, para obtener los datos para generar el grafico.

<?php
include('open_flash_chart2/php-ofc-library/open-flash-chart.php');
class graficaEmpleado {
public function conectar() {
if (!($con = @mysql_connect("localhost", "root", "admin"))) {
echo"Error al conectar a la base de datos";
exit();
}
if (!@mysql_select_db("tutorial", $con)) {
echo "Error al seleccionar la base de datos";
exit();
}
$this->conect = $con;
return true;
}
// consulta los empleados de la BD
public function consulta() {
//usamos el metodo conectar para realizar la conexion
if ($this->conectar() == true) {
$query = "
SELECT COUNT(departamento) AS numero, departamento
FROM empleados GROUP BY departamento";
$result = @mysql_query($query);
if (!$result)
return false;
else
return $result;
}
}
}
?>

  • Adicionamos la función graficaPorDepartamento() al archivo graficaEmpleado.php, donde generamos un array con los datos a graficar, luego definimos y realizamos las configuraciones necesarias para obtener el grafico.

public function graficaPorDepartamento() {
$label = array();
$data = array();
$consulta = $this->consulta();
while ($row = mysql_fetch_array($consulta)) {
#almacenamos los registros en arrays
$label[] = $row['departamento'];
$data[] = intval($row['numero']);
}
$max = max($data);
$max = floor($max / 10) * 10 + 10;
// definimos el titulo
$title = new title('EMPLEADOS POR DEPARTAMENTO');
// definimos los estilos para el texto titulo
$title->set_style('{font-size: 16px; color: #000;font-weight:bold;}');
$animation = 'pop';
$delay = 0.1;
$cascade = 0.5;
//tipo de gráfica, en este caso forma de cilindro
$bar = new bar_cylinder();
$bar->colour('#0033ff');
//definicion del texto para la leyenda del grafico
$bar->key('DEPARTAMENTOS', 12);
//asignamos los datos
$bar->set_values($data);
//definimos el texto para el tooltip
$bar->set_tooltip("TOTAL: #val# Empleados");
$bar->set_on_show(new bar_on_show($animation, $cascade, $delay));
//instanciamos un objeto de la clase open_flash_chart
$chart = new open_flash_chart();
$chart->set_title($title);
//definimos configuraciones para las etiquetas del eje x
$x_labels = new x_axis_labels();
$x_labels->set_vertical();
$x_labels->set_labels($label);
$x_labels->rotate(50);
//asignamos configuraciones para las etiquetas del eje x
$x_axis = new x_axis();
$x_axis->set_labels($x_labels);
//asignamos configuraciones para las etiquetas del eje xy
$y = new y_axis();
$y->set_range(0, $max, 10);
$y_legend = new y_legend('CANTIDAD DE EMPLEADOS POR DEPARTAMENTO');
$y_legend->set_style('{font-size: 12px; color: #000}');
$chart->set_y_legend($y_legend);
//definicion y configuracion de las etiquetas de las barras
$tags = new ofc_tags();
$tags->font("Verdana", 15)
->colour("#000000")
->align_x_center()
->style(true, false, false, 1)
->text('#y#');
$x = 0;
foreach ($data as $v) {
$tags->append_tag(new ofc_tag($x, $v));
$x++;
}
$chart->set_x_axis($x_axis);
$chart->set_y_axis($y);
$chart->add_element($bar);
$chart->add_element($tags);
$chart->set_bg_colour('#FFFFEE');
return $chart->toString();
}

Paso 4 – La vista

  • Vamos a crear un nuevo fichero .php en el directorio “graficas” en el que realizaremos la llamada a la clase graficaEmpleado; para ello guardaremos el archivo como index.php.
  • El directorio del ejemplo se vería así:

Directorio del ejemplo

  • En el archivo index.php, agregar el siguiente código, donde instanciamos un objeto de la clase graficaEmpleado y llamamos a la función graficaPorDepartamento().

<?php
include_once("graficaEmpleado.php");
$obj = new graficaEmpleado();
$chart = $obj->graficaPorDepartamento();
?>

  • Para incluir en una página web el grafico, tenemos que llamar a la función open_flash_chart_data() para cargar los datos y convertirlos en formato JSON, modificar el archivo index.php con el siguiente código:

<?php
include_once("graficaEmpleado.php");
$obj = new graficaEmpleado();
$chart = $obj->graficaPorDepartamento();
?>
<html>
<head>
<script type="text/javascript" src="open_flash_chart2/js/json/json2.js"></script>
<script type="text/javascript" src="open_flash_chart2/js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
"open_flash_chart2/open-flash-chart.swf", "div_chart",
"620", "460", "9.0.0", "expressInstall.swf");
</script>
<script type="text/javascript">
function open_flash_chart_data(){
return JSON.stringify(data);
}
var data = <?php echo $chart; ?>;
</script>
</head>
<body>
<h1>EMPLEADOS</h1>
<div id="div_chart"></div>
</body>
</html>

Paso 4 – Resultado

  • El resultado del ejemplo es el siguiente:

Grafico generado con Open Flash Chart 2

 

Anuncios

20 pensamientos en “OPEN FLASH CHART 2 CON PHP Y MYSQL

  1. Se ha revisado el link de descarga de esta herramienta Open Flash Chart 2
    y si está la carpeta js-ofc-library, dentro de los archivos.

    El link que se publico te da las opciones para descargar las diferentes versiones de esta herramienta:

    http://teethgrinder.co.uk/open-flash-chart-2/downloads.php

    de esta página tienes que clickear en el enlace que te llevara a :

    http://sourceforge.net/projects/openflashchart/files/

    desde el último enlace es de donde podrás descargarlo

    • La configuración del color de la barra se la realiza mediante la clase bar_base (en el ejemplo que se implementa un barra cilíndrica).
      Se debe llamar a la función colour:
      $bar->colour(‘#000000’);
      Tambien puedes configurar el valor alfa:
      $bar->set_alpha(‘0.9’);

      • ola disculpa tengo el mismo error q odalia ya corregui como dijiste jhenrryalvaro y me marca lo mismo no se si lo este haciendo bien si gustas te mando el codigo jhenrryalvaro ok saludos

      • Es este vale

        conect = $con;
        return true;
        }
        // consulta los empleados de la BD
        public function consulta() {
        //usamos el metodo conectar para realizar la conexion
        if ($this->conectar() == true) {
        $query = ”
        SELECT COUNT(departamento) AS numero, departamento
        FROM empleados GROUP BY departamento”;
        $result = @mysql_query($query);
        if (!$result){
        return false;
        }else
        return $result;
        public function graficaPorDepartamento()
        {
        $label = array();
        $data = array();
        $consulta = $this->consulta();
        while ($row = mysql_fetch_array($consulta)) {
        #almacenamos los registros en arrays
        $label[] = $row[‘departamento’];
        $data[] = intval($row[‘numero’]);
        }
        $max = max($data);
        $max = floor($max / 10) * 10 + 10;
        // definimos el titulo
        $title = new title(‘EMPLEADOS POR DEPARTAMENTO’);
        // definimos los estilos para el texto titulo
        $title->set_style(‘{font-size: 16px; color: #000;font-weight:bold;}’);
        $animation = ‘pop’;
        $delay = 0.1;
        $cascade = 0.5;
        //tipo de gráfica, en este caso forma de cilindro
        $bar = new bar_cylinder();
        $bar->colour(‘#0033ff’);
        //definicion del texto para la leyenda del grafico
        $bar->key(‘DEPARTAMENTOS’, 12);
        //asignamos los datos
        $bar->set_values($data);
        //definimos el texto para el tooltip
        $bar->set_tooltip(“TOTAL: #val# Empleados”);
        $bar->set_on_show(new bar_on_show($animation, $cascade, $delay));
        //instanciamos un objeto de la clase open_flash_chart
        $chart = new open_flash_chart();
        $chart->set_title($title);
        //definimos configuraciones para las etiquetas del eje x
        $x_labels = new x_axis_labels();
        $x_labels->set_vertical();
        $x_labels->set_labels($label);
        $x_labels->rotate(50);
        //asignamos configuraciones para las etiquetas del eje x
        $x_axis = new x_axis();
        $x_axis->set_labels($x_labels);
        //asignamos configuraciones para las etiquetas del eje xy
        $y = new y_axis();
        $y->set_range(0, $max, 10);
        $y_legend = new y_legend(‘CANTIDAD DE EMPLEADOS POR DEPARTAMENTO’);
        $y_legend->set_style(‘{font-size: 12px; color: #000}’);
        $chart->set_y_legend($y_legend);
        //definicion y configuracion de las etiquetas de las barras
        $tags = new ofc_tags();
        $tags->font(“Verdana”, 15)
        ->colour(“#000000”)
        ->align_x_center()
        ->style(true, false, false, 1)
        ->text(‘#y#’);
        $x = 0;
        foreach ($data as $v) {
        $tags->append_tag(new ofc_tag($x, $v));
        $x++;
        }
        $chart->set_x_axis($x_axis);
        $chart->set_y_axis($y);
        $chart->add_element($bar);
        $chart->add_element($tags);
        $chart->set_bg_colour(‘#FFFFEE’);
        return $chart->toString();
        }
        }
        }
        }
        ?>

  2. Oye tengo todo en orden pero no me muestra la grafica donde la mandas llamar
    si no que solo me muestra la palabra empleados , ademas de que tengo varios archivos y no me permite seleccionarlos si no que se va directo a tu ejemplo

    • La clase graficaEmpleado se encarga de construir la imagen, y se llama a su función
      $chart = $obj->graficaPorDepartamento();
      Para obtener el array json para generar la gráfica con la función en javascript
      function open_flash_chart_data(){
      return JSON.stringify(data);
      }

      Al parecer solo te esta mostrando la parte de html

      EMPLEADOS

      , asegurate que el id (div_chart) sea el mismo

      javascript:
      swfobject.embedSWF("open_flash_chart2/open-flash-chart.swf", "div_chart",
      "620", "460", "9.0.0", "expressInstall.swf");
      
      html
      

      Los archivos deben tener esta estructura:

  3. Hola.El ejemplo muestra como graficar los datos de una columna, como hago para que me muestre los datos de varias columnas, he modificado la consulta, pero no me funciona.

    Otra pregunta. ¿Como guardo las imagen del grafico?.

    • Mostrar datos de varias columnas… si te refieres a columnas de una tabla de base de datos, solo consiste en construir una consulta sql que tenga por lo menos dos columnas, una con los valores que se van a graficar y la otra con el texto que se mostraran como nombres de las columnas. Cuales tu consulta sql y tus tablas?
      Con respecto a guardar la imagen, bueno con un clic secundario sobre la grafica te aparecerá un menu contextual, una de sus opciones es “Save Image Locally”, claro que se debe hacer algunas configuraciones para que funcione.

      • Hola.
        Si modifique la consulta, pero ahora muestra en una sola barra los datos de las dos columnas. Por ejemplo necesito en una barra me muestra 27 de la primera columna y en la segunda barra 3 de la segunda columna, todo esto de una misma tabla mysql.

        Esta es mi consulta: $query = “SELECT buenestado as buenestado, malestado as malestado FROM funcionamiento”;

        y se supone que aca estos arreglos guardan la etiqueta y el dato.
        $label[] = $row[‘buenestado’].$row[‘malestado’];
        $data[] = intval($row[‘buenestado’].$row[‘malestado’]);

        Gracias por la ayuda.

  4. Hola.
    Se pueden hacer dos o mas graficos en una sola pagina, necesito hacer comparaciones de graficos.
    Talvez pueden ayudarme con las configuraciones para guardar el grafico.
    Estoy trabajando con adobe flash cs3 conectado a mysql desde ahi almaceno todos los registros, pero talvez conocen o saben y me ayudan en esto: tengo un formulario en flash donde tengo 2 combobox donde selecciono colegio y en el otro selecciono grado y tengo un boton que quiero que despues de seleccionar las opciones dibuje el grafico pero no se como hacerlo.
    Ayuda por favor.
    Gracias.

  5. Buenas amigo, como podria generar varias graficas en un mismo archivo, ya que lo he intentado y me aparece este error:

    Fatal error: Cannot redeclare class open_flash_chart in C:\wamp\www\impacto\open_flash_chart2\php-ofc-library\open-flash-chart.php on line 65

  6. MUCHÍSIMAS GRACIAS!!
    Por fin encontré unas gráficas simples pero poderosas, y bastante explicadas!
    Soy principiante en esto de la programación, y tengo una gran duda.
    Se podrá que a esas gráficas se les pinte una barra horizontal con un promedio ya establecido?

    Es decir, pintar una barra horizontal que represente el promedio adecuado de empleados por departamento (en el caso de tu ejemplo) este dato seria fijo en todas las gratificaciones.
    No se si me explico… ¿me podrías ayudar?

    Gracias! Saludos!

  7. Hola, por favor ayuda, me da este error:

    Fatal error: Class ‘bar_cylinder’ not found in C:\xampp\htdocs\graficas\graficaEmpleado.php on line 69

    Gracias.

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s