Gráficos en Symfony

Después de todo, me he animado a escribir este pequeño tutorial.

1. Descargar EzComponents:
wget -c http://ezcomponents.org/files/downloads/ezcomponents-2008.1.tar.bz2

2. Crear un proyecto llamado animales.

3. Crear una aplicación llamada pruebas.

4. Crear un modulo llamado prueba1

5. Descomprimir eZcomponents, y dentro de
animales/apps/pruebas/modules/prueba1/lib
crear ./lib si no existe. copiar las carpetas:
autoload, Base y Graph, en caso de Ez lo usemos solo con GRAFICOS.
6.

En mi caso personal, creé una carpeta dentro de images, llamada font, dentro de la cual, coloque la fuente ubicada en: Graph/tests/data/font.ttf. Esa ruta no es obligatoria, es a gusto de cada quien. Dentro de la documentación hay un archivo llamado template.svg, el cual, hay que copiarlo a la carpeta imnages.


7. PARA EFECTOS DE ESTE TUTORIAL crear el siguiente esquema de datos:

schema.yml:

propel:
_attributes:
package: lib.model
animales:
_attributes: { idMethod: native }
idanimales: { type: INTEGER, required: true, autoIncrement: true, primaryKey: true }
animal: { type: VARCHAR, size: '8' }
cantidad: { type: INTEGER }

8. Popular la Base de datos.

9. Colocar en el actions.class.php lo siguiente:

$this->anim = AnimalesPeer::DoSelect(new Criteria);
$this->mascotas = array(
'caninos' => array(
'sanos' => 10,
'enfermos' => 30,
),
'gatos' => array(
'sanos' => 30,
'enfermos' => 100,
),
'aves' => array(
'sanos' => 38,
'enfermos' => 8,
),
);

10. Colocar en el IndexSuccess.php lo siguiente:

Recuerden que hay que tener permisos de escritura en /images

<?php

$graph = new ezcGraphPieChart();
$graph->title = ‘Estadísticas de animales’;
$graph->data[‘2005’] = new ezcGraphArrayDataSet( array(
$anim[0]->getAnimal() => $anim[0]->getCantidad(),
$anim[1]->getAnimal() => $anim[1]->getCantidad(),
$anim[2]->getAnimal() => $anim[2]->getCantidad(),
$anim[3]->getAnimal() => $anim[3]->getCantidad(),
$anim[4]->getAnimal() => $anim[4]->getCantidad(),
$anim[5]->getAnimal() => $anim[5]->getCantidad()
));

$graph->driver = new ezcGraphGdDriver();
$graph->options->font = ‘font/font.ttf’;
$graph->driver->options->supersampling = 5;
$graph->driver->options->jpegQuality = 100;
$graph->driver->options->imageFormat = IMG_JPEG;
$graph->options->label = ‘%3$.1f%%’;
$graph->options->sum = 100;
$graph->options->percentThreshold = 0.02;
$graph->render(500, 250, ‘images/animales.jpg’);

echo image_tag(‘animales.jpg’);

?>
<br /><br />

<?php
$graph = new ezcGraphBarChart();
$graph->palette = new ezcGraphPaletteEz();
$graph->title = ‘Animales’;
$graph->data[] = new ezcGraphArrayDataSet( array(
$anim[0]->getAnimal() => $anim[0]->getCantidad(),
$anim[1]->getAnimal() => $anim[1]->getCantidad(),
$anim[2]->getAnimal() => $anim[2]->getCantidad(),
$anim[3]->getAnimal() => $anim[3]->getCantidad(),
$anim[4]->getAnimal() => $anim[4]->getCantidad(),
$anim[5]->getAnimal() => $anim[5]->getCantidad()
));

$graph->renderer = new ezcGraphRenderer3d();
$graph->renderer->options->barChartGleam = .5;
$graph->render( 400, 150, ‘images/animal3d.svg’ );

echo “<iframe src=\”/images/animal3d.svg\” width=\”400\” height=\”150\”></iframe>”;
?>
<br>
<br>
<?php
$graph = new ezcGraphBarChart();
$graph->title = ‘Barras’;

// Add data
$graph->data[] = new ezcGraphArrayDataSet( array(
$anim[0]->getAnimal() => $anim[0]->getCantidad(),
$anim[1]->getAnimal() => $anim[1]->getCantidad(),
$anim[2]->getAnimal() => $anim[2]->getCantidad(),
$anim[3]->getAnimal() => $anim[3]->getCantidad(),
$anim[4]->getAnimal() => $anim[4]->getCantidad(),
$anim[5]->getAnimal() => $anim[5]->getCantidad()
));

$graph->render( 400, 150, ‘images/animalbarra.svg’ );
echo “<iframe src=\”/images/animalbarra.svg\” width=\”400\” height=\”150\”></iframe>”;
?>
<br><br>
<?php
//pasando desde acions.class
$grap = new ezcGraphBarChart();
$grap->title = ‘Animales sanos y enfermos’;
foreach ( $mascotas as $tipo => $data )
{
$grap->data[$tipo] = new ezcGraphArrayDataSet( $data );
}
$grap->render( 600, 350, ‘images/pruebas.svg’ );
echo “<br><iframe src=\”/images/pruebas.svg\” width=\”600\” height=\”350\”>
</iframe>”;

?>

<?php
echo “<br><br> COOL”;
//Algo mas bonito

$graph = new ezcGraphPieChart();
$graph->background->color = ‘#FFFFFFFF’;
$graph->title = ‘Animales’;
$graph->legend = true;

$graph->data[] = new ezcGraphArrayDataSet( array(
$anim[0]->getAnimal() => $anim[0]->getCantidad(),
$anim[1]->getAnimal() => $anim[1]->getCantidad(),
$anim[2]->getAnimal() => $anim[2]->getCantidad(),
$anim[3]->getAnimal() => $anim[3]->getCantidad(),
$anim[4]->getAnimal() => $anim[4]->getCantidad(),
$anim[5]->getAnimal() => $anim[5]->getCantidad()
));

$graph->renderer = new ezcGraphRenderer3d();
$graph->renderer->options->pieChartShadowSize = 10;
$graph->renderer->options->pieChartGleam = .5;
$graph->renderer->options->dataBorder = false;
$graph->renderer->options->pieChartHeight = 16;
$graph->renderer->options->legendSymbolGleam = .5;
//images copiada en /images
$graph->driver->options->templateDocument = ‘images/template.svg’;

$graph->driver->options->graphOffset = new ezcGraphCoordinate( 25, 40 );
$graph->driver->options->insertIntoGroup = ‘ezcGraph’;

$graph->render( 400, 200, ‘images/bonito.svg’ );
echo “<br><iframe width=\”450\” height=\”250\” src=\”/images/bonito.svg\” width=\”400\” height=\”200\”></iframe>”;
?>

11. Enjoy

Etiquetas: ,

3 comentarios to “Gráficos en Symfony”

  1. yesiels Says:

    Buenas noches
    He intentado crear los gráficos en mi aplicación, pero aquellos con la extensión svg no se muestran. No se si tengo que hacer algo más aparte de lo que aparece en este blog…

    Agradezco mucho su ayuda

  2. bashman Says:

    Cersiorate de que te genera el svg. acuerdece que para vicular un .svg debe al menos como se ve arriba, usar un iframe, esa es la forma de envedir los svg. Es como un html – frame

  3. patloz Says:

    Hola.
    Muchas gracias por este tutorial!!…Estoy creando un par de gráficas y puedo ver que funciona por el entorno de desarrollo pero no funciona directamente en la aplicación…hay algo que deba tener en cuenta?
    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


A %d blogueros les gusta esto: