Links en gráficos de OpenFlashChart

Joaquín Windmüller — Wed, 04 Jun 2008 02:40:36 +0000

Nueva actualización en el helper de CakePHP. El soporte para enlaces en los datos del gráficos tiene un sólo detalle: bug heredado de la clase PHP de OpenFlashChart como lo indiqué en el mensaje de commit.

En pocas palabras, los enlaces no pueden contener comas ya que la clase que ofrece OpenFlashChart hace locuras con el arreglo de enlaces convirtiéndolo a string ¿separado por qué? adivinaron bién: comas.

El ejemplo 1 está actualizado con esta nueva capacidad.

Eso me deja sin tickets abiertos, sin embargo aún hay espacio para mejorara. Si encuentras un bug o deseas una nueva funcionalidad registra un ticket o deja un comentario.

Entradas relacionadas

Post from: Aikon

Actualizaciones al Helper FlashChart

Joaquín Windmüller — Sat, 31 May 2008 04:50:31 +0000

Hoy he cerrado un par de tickets: #1 y #3.

Lo más interesante de esto es que ahora los rangos del eje y se calculan automáticamente.

También he actualizado los gráficos de ejemplo para que muestren el código fuente usado para cada uno, el cual actualizaré próximamente para hacer uso de las nuevas capacidades implementadas en #3.

Es bueno saber que hay gente usando este pedacito de código: ya tengo 2 tickets más por cerrar.

Saludos

Entradas relacionadas

Post from: Aikon

Open Flash Chart Helper: gráficos al estilo Cake

Joaquín Windmüller — Wed, 02 Apr 2008 03:34:13 +0000

Nota: si deseas recibir actualizaciones sobre el Helper de CakePHP para Open Flash Chart suscríbete al feed de la categoría.

Open Flash Chart es una solución interesante para dibujar gráficos a partir de datos en tu aplicación. Este artículo introduce un Helper de CakePHP para hacer la labor de dibujar gráficos más sencilla.

Requisitos

Para hacer uso de este helper, primero debes descargar el archivo zip de Open Flash Chart desde http://teethgrinder.co.uk/open-flash-chart/download.php.

Dentro hay dos archivos necesarios para usar este helper:

open-flash-chart.swf coloca este archivo en el directorio [app]/webroot/
php-ofc-library/open-flash-chart.php coloca este archivo en el directorio [app]/vendors

El Helper:

Para obtener el helper descargalo del repositorio subversion:

svn co http://svn2.assembla.com/svn/cakeopenflashchart/trunk/flash_chart.php

Si no usas svn puedes descargarlo, manualmente, de ese url también

Uso

Ahora, para usar este helper haz como con cualquier otro:

var $uses = array(‘FlashChart’);

Los siguientes ejemplos están todos colocados en un archivo de vista [app]/views/pages/charts.ctp (por lo tanto debes modificar PagesController para que use el Helper) y generan datos al azar (pero usar una base de datos es igual de fácil).

Ejemplo 1 - Gráficos de Barra

begin(400, 250);
// Title
$flashChart->title(‘Example 1 - Bars: Hits per Day’);
// Configure Grid style and legends
$flashChart->configureGrid(
array(
‘x_axis’ => array(
’step’ => 1,
‘legend’ => ‘Day’
),
‘y_axis’ => array(
‘legend’ => ‘#Hits’,
)
)
);
// Prepare some random data (10 points)
$random_hits = array();
for ($i=0; $i < 10; $i++) {
$random_hits[] = rand(10,100);
}
// Register each data set with its information.
$data = array(
‘Hits’ => array(
‘color’ => ‘#afe342′,
‘font_size’ => 11,
‘data’ => $random_hits,
‘graph_style’ => ‘bar’,
)
);
$flashChart->setData($data);
// Set Ranges in the chart
$flashChart->setRange(‘y’, 0, 100);
$flashChart->setRange(‘x’, 0, 10);
// Show the graph
echo $flashChart->render();
?>

Este ejemplo genera un gráfico de barras sencillo con los datos generados al azar en un ciclo. Para generar otro gráfico en la misma vista es importante reiniciar los datos del helper invocando el método FlashChartHelper::begin

Nota: cambia ‘graph_style’ => ‘bar’ a alguno de los siguientes para ver todos los tipos de gráfico de barra disponibles

‘graph_style’ => ‘bar_sketch’
‘graph_style’ => ‘bar_glass’
‘graph_style’ => ‘bar_filled’
‘graph_style’ => ‘bar_3D’
‘graph_style’ => ‘bar_fade’

Ejemplo 2 - Gráficos de Líneas

Para graficar líneas en vez de barras, el único cambio necesario al ejemplo anterior es sustituir ‘graph_style’ => ‘bar’ por alguno de los siguientes

‘graph_style’ => ‘line’
‘graph_style’ => ‘line_hollow’
‘graph_style’ => ‘line_dot’

begin(400, 250);
// Title
$flashChart->title(‘Example 2 - Lines: Hits per Day’);
// Configure Grid style and legends
$flashChart->configureGrid(
array(
‘x_axis’ => array(
’step’ => 1,
‘legend’ => ‘Day’
),
‘y_axis’ => array(
‘legend’ => ‘#Hits’,
)
)
);
// Prepare some random data (10 points)
$random_hits = array();
for ($i=0; $i < 10; $i++) {
$random_hits[] = rand(10,100);
}
// Register each data set with its information.
$data = array(
‘Hits’ => array(
‘color’ => ‘#00aa42′,
‘font_size’ => 11,
‘data’ => $random_hits,
‘graph_style’ => ‘lines’,
)
);
$flashChart->setData($data);
// Set Ranges in the chart
$flashChart->setRange(‘y’, 0, 100);
$flashChart->setRange(‘x’, 0, 10);
// Show the graph
echo $flashChart->render();
?>

Ejemplo 3 - Gráficos de Puntos

Este tipo de gráfico usa una sintaxis diferente para definir los datos a graficar. Requiere que los datos se especifiquen en puntos (pares x,y), aquí está el ejemplo:

begin(400, 250);
// Title
$flashChart->title(‘Example 3 - Scatter: Some Random Points’);
// Configure Grid style and legends
$flashChart->configureGrid(
array(
‘x_axis’ => array(
’step’ => 1,
‘legend’ => ‘Day’
),
‘y_axis’ => array(
‘legend’ => ‘#Hits’,
)
)
);
// Prepare some random data (10 points)
$random_points = array();
for ($i=0; $i < 10; $i++) {
// Each point is represented as a pair (x,y)
$random_points[] = array(‘x’ => $i, ‘y’ => rand(0,100));
}
// Register each data set with its information.
$data = array(
‘Random Points’ => array(
‘color’ => ‘#00aa42′,
‘font_size’ => 11,
‘data’ => $random_points,
‘graph_style’ => ’scatter’
)
);
$flashChart->setData($data);
// Set Ranges in the chart
$flashChart->setRange(‘y’, 0, 100);
$flashChart->setRange(‘x’, 0, 10);
// Show the graph
echo $flashChart->render();
?>

Ejemplo 4 - Gráficos de Torta

Este tipo de gráfico también usa una sintaxis distinta, aquí está el ejemplo:

begin(400, 250);
$flashChart->title(‘Example 4 - Pie Chart: My imaginary Browser Stats’);
$browser_data = array(
‘Firefox’ => array(
‘value’ => 30
),
‘Opera’ => array(
‘value’ => 7
),
‘IE’ => array(
‘value’ => 38
),
‘Other’ => array(
‘value’ => 25
)
);
$flashChart->pie($browser_data);
echo $flashChart->render();
?>

Nota: El Helper de Flash Chart selecciona automáticamente los colores, para cada sección del gráfico, si no los estableces explícitamente.

Ejemplo 5 - Gráficos Mixtos

Open Flash Chart permite varios conjuntos de datos dentro de un mismo gráfico, puedes mezclar gráficos de barras, líneas y puntos, aquí hay un ejemplo que extienden al primer ejemplo presentado:

begin(400, 250);
// Title
$flashChart->title(‘Example 5 - Mixed: Hits per Day vs. # Visits’);
// Configure Grid style and legends
$flashChart->configureGrid(
array(
‘x_axis’ => array(
’step’ => 1,
‘legend’ => ‘Day’
),
‘y_axis’ => array(
‘legend’ => ‘#Hits’,
)
)
);
// Prepare some random data (10 points)
$visits = array();
$random_hits2 = array();
for ($i=0; $i < 10; $i++) {
$visits[] = rand(10,50);
$random_hits2[] = rand(50,100);
}
// Register each data set with its information.
$data = array(
‘Hits’ => array(
‘color’ => ‘#afe342′,
‘font_size’ => 11,
‘data’ => $random_hits2,
‘graph_style’ => ‘line_dot’,
),
‘Visits’ => array(
‘color’ => ‘#324aef’,
‘font_size’ => 11,
‘data’ => $visits,
‘graph_style’ => ‘bar’,
)
);
$flashChart->setData($data);
// Set Ranges in the chart
$flashChart->setRange(‘y’, 0, 100);
$flashChart->setRange(‘x’, 0, 10);
// Show the graph
echo $flashChart->render();
?>

Resultados

Los resultados de estos ejemplos pueden encontrarlos en http://aikon.com.ve/flashchart/

¿Qué Falta?

En estos momentos, hay dos tipos de gráfico que Open Flash Chart ofrece y que el Helper no implementa:

High Low Close (??): http://teethgrinder.co.uk/open-flash-chart/gallery-hlc.php
Candle (gráficos de caja): http://teethgrinder.co.uk/open-flash-chart/gallery-candle.php

Algunas posibles mejoras:

Escribir funciones de más alto nivel que encapsulen muchas de las líneas usadas en los ejemplos.
Selección automática de los rangos de los ejes.

Si algo falta

Reportalo: http://trac2.assembla.com/cakeopenflashchart/newticket

Entradas relacionadas

Post from: Aikon

Gráficos en CakePHP con Open Flash Chart

Joaquín Windmüller — Thu, 20 Mar 2008 07:00:30 +0000

Open Flash Chart es una opción interesante para generar gráficos llamativos con flash. Permite generar gráficos de barras (en múltiples estilos), lineas, puntos, tortas, etc. lo cual puede ser muy útil en algunas aplicaciones web.

Para poner a funcionar Open Flash Chart y CakePHP he creado un helper
que permite en cualquier vista generar los gráficos que sean necesarios.El Helper se encuentra en un repositorio svn, puedes obtenerlo haciendo:
svn co http://svn2.assembla.com/svn/cakeopenflashchart/trunk/flash_chart.php

Si no usas svn, descargalo desde ese mismo url.

Para ponerlo a funcionar debese seguir los siguientes pasos:

Descarga Open Flash Chart: http://teethgrinder.co.uk/open-flash-chart/download.php
Coloca en la carpeta [APP]/webroot el archivo open-flash-chart.swf
Coloca en la carpeta [APP]/vendors el archivo open-flash-chart.php

Listo, eso es todo. Ejemplos de como usarlo los publicaré acá.

Entradas relacionadas

Post from: Aikon

Aikon » CakeOpenFlashChart

Links en gráficos de OpenFlashChart

Entradas relacionadas

Actualizaciones al Helper FlashChart

Entradas relacionadas

Open Flash Chart Helper: gráficos al estilo Cake

Requisitos

El Helper:

Uso

Ejemplo 1 - Gráficos de Barra

Ejemplo 2 - Gráficos de Líneas

Ejemplo 3 - Gráficos de Puntos

Ejemplo 4 - Gráficos de Torta

Ejemplo 5 - Gráficos Mixtos

Resultados

¿Qué Falta?

Algunas posibles mejoras:

Si algo falta

Entradas relacionadas

Gráficos en CakePHP con Open Flash Chart

Entradas relacionadas