Gráficos con eZ Components.
Clasificado bajo Internet Explorer, SVG, eZ Components, gráficos | 1 comentario
Uno de los componentes más vistosos que se incluyen con eZ Components es el componente Graph. Este componente permite la generación de gráficos de diversos tipos (tarta, líneas, barras...) partiendo de datos, los cuales pueden provenir de una consulta SQL si así lo queremos.
Para mostrar alguna de sus posibilidades, vamos a jugar con los datos del último Real Madrid - F.C. Barcelona disputado en la liga ACB de Baloncesto. Elegiremos algunas muestras de datos y con ellas veremos como éstos pueden ser fácilmente portados a un formato gráfico.
En el primer ejemplo vamos a generar un gráfico de tarta con los puntos obtenidos por cada uno de los jugadores del Barça.
$graph = new ezcGraphPieChart(); $graph->title = 'Puntos conseguidos por jugadores del Barça'; $graph->data['Access statistics'] = new ezcGraphArrayDataSet( array( 'Basile' => 1, 'Trias' => 0, 'Burton' => 8, 'Lakovic' => 17, 'Navarro' => 7, 'Andersen' => 12, 'Vázquez' => 13, 'Ilyasova' => 14, 'Sada' => 3, 'Santiago' => 2, 'Grimau' => 2 ) ); $graph->render( 500, 250, $_SERVER['DOCUMENT_ROOT'] . "/var/ezflow_site/storage/graph1.svg" );
Usando el método renderToOutput mandamos la salida directamente a pantalla. Sin embargo, debemos tener cuidado al usar este método, ya que envía sus propios headers. Por tanto, si queremos generar el gráfico en pantalla debemos de tener en cuenta que no podremos mandar ninguna otra información.
Como solución podemos usar el método graph->render, que funciona de forma similar al anterior pero al qeu le pasaremos la ruta donde queramos guardar nuestro gráfico. Ejemplo.
$graph->renderToOutput( 500, 250 );
Has de tener en cuenta que, por defecto, la salida produce una imagen en formato SVG. Esto tiene muchas ventajas pero también el inconveniente de que Internet Explorer no lo soporta de forma nativa. Por eso, en nuestro script vamos a añadir una llamada al programa rsvg, que deberás tener instalado en tu servidor, y que nos convertirá el svg en un png. Esta es la técnica que usaremos para poder enseñar nuestros resultados también en Internet Explorer. Aquí tienes el primero de nuestros gráficos, obtenido de los datos indicados más arriba. También puedes pensar en usar algún otro driver. Te remitimos a la documentación para más información.
Por defecto, el gráfico se genera con una serie de opciones por defecto, entre ellas los colores de cada uno de los trozos de la tarta. Existen una serie de paletas predefinidas a las que nosotros podemos añadir nuestras propias configuraciones valiéndolos para ello de la clase ezcGraphRendererOptions para añadir distintas formas de presentación a nuestro gráfico. Por ejemplo, vamos a modificar el ćodigo anterior para resaltar a Lakovic, vamos a usar una paleta distinta y posteriormente añadir alguna opción para cambiar el tipo de letra. Únicamente necesitaremos añadir unas pocas líneas antes de producir nuestra imagen.
$graph = new ezcGraphPieChart(); $graph->title = 'Puntos conseguidos por jugadores del Barça'; $graph->data['puntos'] = new ezcGraphArrayDataSet( array( 'Basile' => 1, 'Trias' => 0, 'Burton' => 8, 'Lakovic' => 17, 'Navarro' => 7, 'Andersen' => 12, 'Vázquez' => 13, 'Ilyasova' => 14, 'Sada' => 3, 'Santiago' => 2, 'Grimau' => 2 ) ); $graph->data['puntos']->highlight['Lakovic'] = true; $graph->palette = new ezcGraphPaletteEz(); $graph->legend->position = ezcGraph::RIGHT; $graph->legend->landscapeSize = .05; $graph->title->background = "#cccccc"; $graph->title->font->maxFontSize = 22; $graph->legend->font->maxFontSize = 15; $graph->options->font->name = 'serif'; $graph->render( 500, 250, $_SERVER['DOCUMENT_ROOT'] . "/var/ezflow_site/storage/graph2.svg" ); system("rsvg var/ezflow_site/storage/graph2.svg var/ezflow_site/storage/graph3.png"); // Test image. $fn = 'var/ezflow_site/storage/graph3.png'; // Getting headers sent by the client. $headers = apache_request_headers(); // Checking if the client is validating his cache and if it is current. if (isset($headers['If-Modified-Since']) && (strtotime($headers['If-Modified-Since']) == filemtime($fn))) { // Client's cache IS current, so we just respond '304 Not Modified'. header('Last-Modified: '.gmdate('D, d M Y H:i:s', filemtime($fn)).' GMT', true, 304); } else { // Image not cached or cache outdated, we respond '200 OK' and output the image. header('Last-Modified: '.gmdate('D, d M Y H:i:s', filemtime($fn)).' GMT', true, 200); header('Content-Length: '.filesize($fn)); header('Content-Type: image/png'); print file_get_contents($fn); } $Result["pagelayout"] = false;
Es igual de sencillo crear un gráfico de líneas. Para ello vamos a usar los datos de la puntuación de los equipos cada 5 minutos. Los datos completos puedes encontrarlos en el script graph4.php que puedes descargarte al final de este artículo.
Y aquí el resultado.
Al igual que en la versión anterior, unas pocas líneas de código más y tendremos un gráfico totalmente distinto.
Como ves, para generar gráficos tu único trabajo va a ser el de proveer de datos a los mismos. Si quieres ir más allá, el compontente Graph te da multitud de posibilidades para que tus gráficos se amolden a los diseños de tu site. No es dificil deducir que estos datos pueden provenir tanto de consultas SQL como de archivos en Excel, por ejemplo.
Descárgate los scripts de ejemplo.
Se podría hacer con un Madrid - Barsa de fútbol?