Open Flash Chart Helper: gráficos al estilo Cake

[Este es un artículo que he escrito en inglés para el Bakery de CakePHP y que traduzco acá para la comunidad en español] 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.

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:

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

Recibe otros artículos como este automáticamente
Suscríbete vía RSS a aikon.com.ve || ¿Qué es RSS?

Entradas relacionadas

Tags: , ,

en: CakeOpenFlashChart, CakePHP

1/04/2008

Comentarios

» 11 Personas han comentado sobre “Open Flash Chart Helper: gráficos al estilo Cake”

  1. José Lorenzo:

    Hola, me ha gustado mucho tu helper. Creo que lo usaré en varios proyectos y en mi Tesis.

    ¿Hay alguna manera de imprimir los Gráficos generados en flash?

    Gracias por compartir…

    Abril 1, 2008 // 23:59

  2. Joaquín Windmüller:

    Hola José.

    Parece que es un problema de Flash, al menos en Firefox.

    He probado en Safari y Opera en Mac OS X y sí imprime correctamente los gráficos. Parece ser un problema conocido: https://bugs.launchpad.net/firefox/+bug/117036

    Abril 2, 2008 // 1:26

  3. straighten » links for 2008-04-02:

    [...] Open Flash Chart Helper: gráficos al estilo Cake (tags: cakephp Chart swf Flash) | | | Yahoo!ブックマークに登録 | | | [...]

    Abril 2, 2008 // 16:11

  4. Links en gráficos de OpenFlasChart:

    [...] 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 [...]

    Junio 3, 2008 // 22:10

  5. Francisco:

    Hola, me parece muy bueno el helper, toy tratando de implementar en cake 1.2, pero al momento de mostrar el grafico en firefox veo toda la pagina en html y en internet explorer no me muestra el grafico…
    Alguien sabe porque puede ser?

    saludos

    Agosto 27, 2008 // 17:59

  6. Francisco:

    Bueno segun como lo vi en la version en ingles faltaba copiar el archivo swfobject.js en webroot\js, con esto funciona muy bien en internet explorer, pero segue mostrando solo codigo html en firefox.
    Alguien sabe porque sucede esto?

    saludos

    Agosto 27, 2008 // 18:19

  7. Francisco:

    Bueno respondo como solucionar el problema de que habia plantiado anteriormente (que firefox muestra el html en la pagina y no el grafico), tienen que habrir el archivo “open-flash-chart.php” y buscar la linea que dice: “header(’content-type: text; charset: utf-8′);” luego comenten esa linea y listo.

    Agradesco la ayuda de Joaquin que me respondio por mail..

    Saludos

    Agosto 31, 2008 // 16:11

  8. alkemann:

    Una versión actualizada de la ayuda que se aprovecha de la nueva “Open Flash Chart” versión ya está disponible en http://aikon.com.ve/open-flash-chart-helper-graficos-al-estilo-cake/.

    Noviembre 25, 2008 // 5:59

  9. alkemann:

    Lo sentimos, pero la pega mal vínculo. Es http://bakery.cakephp.org/articles/view/flashcharthelper-version-3

    Noviembre 25, 2008 // 6:00

  10. Carlos:

    Tienen algun ejemplo del controlador?

    saludos

    Mayo 27, 2009 // 0:01

  11. Joaquín Windmüller:

    Este helper fue actualizado por otra persona para funcionar con OpenFlashChart2, revisa en bakery.

    Mayo 27, 2009 // 0:42

Deja tu respuesta

requerido

requerido

Nota: mantente dentro del tema y se respetuoso.