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