Hace unos días tuve la necesidad de integrar Open Flash Chart en una instalación de Codeigniter para dotar de capacidades gráficas a un sistema modular que estoy desarrollando. Buscando en la red me encontré con este hilo en los foros de CI que aborda el problema, aunque no del todo.

Los pasos a seguir son los siguientes:

1. Descargar la última versión de OpenFlashChart desde su página de descargas, o bien en el enlace directo a la descarga de OpenFlashChart versión 1.9.7.
2. Instalación.- En el archivo comprimido vienen 4 archivos que nos interesan:
   1. swfobject.js que viene en la carpeta js/ del zip (este archivo permite embeber el reproductor flash en los navegadores, arreglando el problema de IE que requiere al usuario activar el control). Lo colocaremos en la ruta en que tengamos nuestros javascripts (en mi caso, un directorio en la raíz de mi instalación, es decir, al mismo nivel que la carpeta system: javascript/).
   2. open-flash-chart.swf viene en la raíz del zip (es el graficador flash). En mi caso cree una carpeta, system/ofchart y coloque ahí el archivo.
   3. open-flash-chart.php viene en la carpeta php-ofc-library del zip. Este hay que copiarlo en system/application/libraries, renombradolo como graph.php (o como tu quieras, siempre que recuerdes como lo llamaste).
   4. open_flash_chart_object.php viene en la misma ruta que el anterior. Lo colocaremos en system/application/helpers, renombrandolo como open_flash_chart_helper.php.
3. Configuración.- Para que todo funcione tendremos que editar algunos archivos (ficheros, para los ibéricos):
   1. system/application/config/autoload.php es el archivo de configuración que realiza la carga de archivos en nuestra instalación. Ahí añadí la parte roja de las siguientes lineas:
      $autoload['libraries'] = array(’session’ ,’usuarios_libreria’ ,’database’ ,’ajax’ ,’user_agent’ ,’graph’);
      $autoload['helper'] = array(’url’ ,’usuarios’ ,’form’ ,’cookie’ ,’grupos’ ,’modulos’ ,’open_flash_chart’);
      Esto es para hacer accesibles la librería y el helper en cualquier parte de la aplicación, aunque si no vas a usar mucho las gráficas podrías simplemente llamarlas en los controles en que necesites presentarlas, con las líneas:
      $this->load->library(‘graph’);
$this->load->helper(‘open_flash_chart’);
   2. Hay que corregir algunas líneas tanto en el helper como en la librería para ajustar las variables que contienen las rutas a swfoject.js y a open-flash-chart.swf, para que estas reflejen las rutas que hemos definido durante la instalación. La forma más fácil de hacer esto es buscando las cadenas (de archivos y rutas) dentro del texto y hacer los cambios necesarios.
      Si tus rutas coinciden con las descritas en este texto quizás quieras descargar los archivos ya modificados para ahorrarte el que probablemente sea el paso más engorroso de la instalación: descargar open_flash_chart_helper.php y graph.php.
4. Uso.- Una vez instalado y configurado todo podemos usar Open Flash Chart desde cualquier control, por medio de $this->graph->lo-que-sea(). Aunque no esta muy documentada, la clase graph de la librería del mismo nombre contiene todas las funciones que necesitamos, y en la página del autor hay muchos ejemplos de uso que solo debemos adaptar a la sintaxis de CodeIgniter. Para representar un gráfico de tarta bastara con colocar la siguiente función en tu controlador:
   function tarta(){
   $cantidad = array(’50′,’3′,’8′,’5′);
   $bp_label = array(’uno’,'dos’,'tres’,'cuatro’);
   $this->graph->pie(80,’#505050′,’{font-size: 12px; color: #404040}’);
   $this->graph->pie_values($cantidad,$bp_label);
   $this->graph->pie_slice_colours( array(’#d9db35′,’#487daf’,'#d00000′,’#4ae331′) );
   $this->graph->title(’Mi título’,'{font-size:14px; color: #7F7772}’ );
   echo $this->graph->render();
   }
   y para un gráfico de barras:
   function barras(){
   $this->graph->bar_filled(60,’#CC6600′,’#CC3300′,’2005′,12 );
   $this->graph->bar_filled(60,’#999999′,’#333333′,’2006′,12 );
   $this->graph->bar_filled(60,’#FF0000′,’#CC0000′,’2007′,12 );
   $this->graph->bar_filled(60,’#009900′,’#003300′,’2008′,12 );
   $this->graph->set_y_max(100);
   $this->graph->set_tool_tip(’#x_label# de #key#<br>Datos $ #val#’);
   $this->graph->set_data(array(15,22,57,63,92,25,80,23,52,76,94,97));
   $this->graph->set_data(array(25,43,87,52,15,70,65,63,18,43,36,22));
   $this->graph->set_data(array(5,10,15,20,25,30,35,40,45,50,55,60));
   $this->graph->set_data(array(95,90,85,80,75,70,65,60,55,50,45,40));
   $this->graph->title(’Mi título’,'{font-size:14px; color: #7F7772}’ );
   $this->graph->y_label_steps( 4 );
   $this->graph->set_y_legend( ‘Datos’, 12, ‘#736AFF’ );
   $this->graph->set_x_axis_steps(4);
   $this->graph->set_x_labels(array(’Enero’, ‘Febrero’, ‘Marzo’, ‘Abril’, ‘Mayo’, ‘Junio’, ‘Julio’, ‘Agosto’, ‘Septiembre’, ‘Octubre’ ,’Noviembre’, ‘Diciembre’));
   echo $this->graph->render();
   }
   Finalmente, habrá que crear una vista que contenga las siguientes lineas:
   <?open_flash_chart_object(’100%’, 250, site_url(’mi-controlador/tarta’, false,”) ?>
   <?open_flash_chart_object(’100%’, 250, site_url(’mi-controlador/barras’, false,”) ?>
   Al llamar esta vista desde cualquier controlador se presentaran las 2 gráficas que hemos creado.
5. Creatividad.- La gráficas creadas en este ejemplo son estáticas para facilitar su comprensión, pero a partir de ellas podremos crearlas con el contenido de cualquier base de datos, simplemente cargando los array´s desde nuestros modelos o controladores… Es posible también crear modelos que contengan, por ejemplo, estilos para nuestras gráficas.

Es todo por ahora… hasta la próxima.

Entradas relacionadas

• Face detection (0)
• Una ayudita por el amor de dios… (0)
• Primer aniversario (1)
• pChart: Gráficas con PHP (0)
• Open Flash Chart (4)