PHPlot

• Directorio de imágenes - miniaturas
• Métodos utilizados en graph.php responsables del aspecto de la gráfica

Directorio de imágenes - miniaturas

Intentemos crear una sencilla gráfica de líneas y puntos.

Primero debemos incluir la librería a nuestro script (suponemos que su código se encuentra en el mismo directorio que el código del script del Listado 1):

include_once("phplot.php");

Luego creamos el array y lo llenamos con datos:

$data=array(array(..));

El siguiente paso será la creación de una instancia de la clase PHPlot:

$graph = new PHPlot;

seguidamente, la transferencia de datos (la transferencia del array $data, preparado anteriormente, como parámetro):

$graph->SetDataValues($data);

Para terminar, utilizamos el método que permite mostrar la gráfica por pantalla:

$graph->DrawGraph();

Si alguien cree que esta es una solución mágica, debería leer el script completo que se despliega en el Listado 1 y el resultado de su funcionamiento que se presenta en la Figura 1.

<?php
   include_once("phplot.php");
   $data=
      array(
         array("label1",2.4,3,
               3.7,4,5.1),
         array("label2",3,4,5,
               6,7),
         array("label3",1.1,2.2,
               3.3,4.4,5.5),
         array("label4",1.7,2,3,
               1.4,2),
     );
   $graph = new PHPlot;
   $graph->SetDataValues($data);
   $graph->DrawGraph();
?>

Después de analizar el código y la gráfica obtenida de su ejecución, podemos sacar varias conclusiones interesantes. Primero, es fácil notarlo; PHPlot es una librería orientada a objetos. Así, empieza a “existir”, después de crear las instancias de la clase PHPlot, y todos los atributos de la gráfica son establecidos gracias a la llamada de diferentes métodos de esta clase. Esta metodología garantiza la sencillez en la creación de gráficas, ya que es suficiente conocer varios métodos básicos para poder crear y personalizar libremente cualquier gráfica. Segundo; a los campos de la clase se les asignan valores por defecto, lo que no obliga al programador a tener que recordar diferentes métodos gráficos. Aquel que no quiere o no tiene tiempo para personalizar la gráfica, puede aceptar su apariencia por defecto, la cual – como se puede apreciar en la Figura 1 – no es peor que las gráficas profesionales que se han realizado en hojas de cálculos comerciales. Además, de acuerdo con lo que fue descrito anteriormente, el método DrawGraph() realiza dos funciones, dado que coloca la gráfica en el dibujo y despliega ese dibujo en la ventana del navegador.Ya sabemos que esta forma de funcionamiento del método antes mencionado sólo es posible si en el dibujo colocamos una sola gráfica. Como veremos después, para desplegar dibujos que contengan varias gráficas, deberemos utilizar el método PrintImage().

En la versión por defecto de la gráfica, la escala del eje de las ordenadas se selecciona de acuerdo a los valores de los datos. Las coordenadas de los puntos se calculan con respecto al inicio del sistema de las coordenadas cartesianas, lo que parece ser natural, pero teniendo en cuenta que internamente utiliza la librería GD, no es tan obvio. Las funciones de esta librería utilizan coordenadas de la pantalla (píxeles), calculados a partir de la esquina izquierda superior de la pantalla. Las funciones internas de la librería PHPlot recalculan las coordenadas transferidas en el array de datos a coordenadas de la pantalla requeridas por la librería GD. El tipo de datos transferidos por defecto en la tabla es de tipo texto-dato (los puntos de datos se colocan conservando la misma distancia entre ellos sobre el eje X). Añadámos la siguiente línea al código del Listado 1:

$graph->SetDataType("data-data");

y veamos como sería ahora nuestra gráfica. Esta se presenta en la Figura 2.

Como podemos apreciar, el aspecto de la gráfica cambia diametralmente. El método SetDataType() se puede utilizar en cualquier lugar del código, entre el renglón en el que se crea el objeto de la clase PHPlot, y la línea que contiene el acceso al método DrawGraph().

Los usos avanzados de la librería PHPlot consistirán en la adaptación del aspecto de la gráfica a nuestras necesidades. Como veremos a continuación, el programador tiene grandes posibilidades.

Adaptación de la gráfica a los requerimientos propios.

El ejemplo estará compuesto de dos scripts. La responsabilidad del primero de ellos consistirá en proporcionar un formulario, y el segundo será responsable de interpretar los datos recibidos de este formulario y de desplegar la gráfica. Supongamos que la gráfica que queremos crear debe presentar los ingresos y gastos reales, y planeados de un negocio; ingresos/gastos en el rango de los años 1999-2003. Los datos para la gráfica será introducidos con la ayuda del formulario, que también nos servirá para definir los parámetros de la gráfica (su aspecto, tipo, etc.). El aspecto de este formulario se presenta en la Figura 3. Aquí no presentaremos su código, ya que no proporciona nada nuevo. Esto es simplemente un formulario amplia en HTML. Es fácil notar que la cantidad de opciones que permiten las modificaciones de la gráfica es notable. Aún más, la forma permite la manipulación de sólamente un subconjunto de todas las posibilidades. En realidad la librería PHPlot ofrece varias decenas de métodos, con la ayuda de los cuales se pueden personalizar las gráficas creadas. Gracias a estos métodos, el usuario puede influir en casi cualquier elemento de la gráfica, modificándolo de manera similar a como se hace en las hojas de cálculo profesionales.

Los datos reunidos en el formulario, que se presenta en la Figura 3, se envían con la ayuda del método POST al script graph.php, donde se utilizan para dibujar la gráfica y adaptar su aspecto a las necesidades del usuario. El código del script graph.php se presenta en el Listado 2, y algunos de los efectos de sus funcionamiento en las Figuras 4, 5 y 6.

<?php
   include("phplot.php");
   //preparación del array de los datos
   $data=array(array("1999",$_POST['ip1'], $_POST['ir1'], $_POST['ep1'],
                            $_POST['er1']),
               array("2000",$_POST['ip2'], $_POST['ir2'], $_POST['ep2'],
                            $_POST['er2']),
               array("2001",$_POST['ip3'], $_POST['ir3'], $_POST['ep3'],
                            $_POST['er3']),
               array("2002",$_POST['ip4'], $_POST['ir4'], $_POST['ep4'],
                            $_POST['er4']),
               array("2003",$_POST['ip5'], $_POST['ir5'], $_POST['ep5'],
                            $_POST['er5']),
              );
   //creación del objeto de la clase PHPlot,
   //transferencia de datos y definición de su tipo
   $graph = new PHPlot($_POST['graph_width'], $_POST['graph_height']);
   $graph->SetDataValues($data);
   $graph->SetDataType("text-data");
   //formateo de la gráfica
   $graph->SetPlotType($_POST['graph_type']);
   $graph->SetVertTickIncrement($_POST['tick_inc']);
   $graph->SetTickLength($_POST['tick_length']);
   $graph->SetTickColor($_POST['tick_color']);
   $graph->SetPointShape($_POST['point_shape']);
   $graph->SetPointSize($_POST['point_size']);
   $graph->SetTitle($_POST['title_graph']);
   $graph->SetXLabel($_POST['title_X']);
   $graph->SetYLabel($_POST['title_Y']);
   if($_POST['is_legend'])
      $graph->SetLegend(array("Ingresos planeados", "Ingresos reales",
                              "Gastos planeados", "Gastos reales")
                       );
   $graph->SetLegendPixels($_POST['legend_X'],
                           $_POST['legend_Y']);
   $graph->SetLineWidth($_POST['line_width']);
   $graph->SetLineStyles($_POST['line_style']);
   $graph->SetShading($_POST['line_shadow']);
   $graph->SetBackgroundColor($_POST['bg_color']);
   $graph->SetGridColor($_POST['grid_color']);
   $graph->SetDataColors(array($_POST['data_color1'], $_POST['data_color2'],
                               $_POST['data_color3'], $_POST['data_color4'])
                        );
   $graph->SetTextColor($_POST['scale_color']);
   $graph->SetTitleColor($_POST['title_color']);
   $graph->SetLightGridColor($_POST['grid_color']);
   //Visualización de la gráfica
   $graph->DrawGraph();
?>

Intentemos analizar un poquito más a fondo el código del Listado 2. Después de haber incluido la librería PHPlot, creamos el array de datos que se compone de cinco tablas de valores. Cada una de estas tablas representa un año, cuyo nombre será transferido en el primer elemento. Los elementos restantes son los valores que fueron enviados desde el formulario en el array superglobal $_POST. Estos valores representan cuatro series de datos, que son respectivamente los ingresos y gastos analizados en los años consecutivos. Merece la pena notar que la cantidad de series de datos en el modo texto-dato es igual a la cantidad de los elementos en el array de valores menos uno.

La forma de colocación de los datos en los arrays de valores es muy importante, dado que ésta decide sobre el aspecto de la gráfica. Si en el ejemplo presentado hubieramos invertido el orden de los datos, creando cuatro arrays de valores correspondientes a los ingresos y gastos analizados, donde cada uno de ellos contuviera la etiqueta del parámetro analizado y cinco elementos, representando los valores de ese parámetro en los años consecutivos, obtendríamos una gráfica, en la cual en el eje de las ordenadas se encontrarían los valores de los ingresos y gastos ocurridos en estos años, y en el eje de las abscisas estarían colocadas las etiquetas de los parámetros consecutivos. Tal array de datos se presenta en el Listado 3, y la gráfica que le corresponde está colocada en la Figura 7. Vemos que una forma diferente de leer los datos, no solamente cambia el aspecto de las gráfica, sino también su interpretación.

$data=
   array(
      array("Ingresos reales",$_POST['ip1'], $_POST['ip2'],
             $_POST['ip3'], $_POST['ip4'], $_POST['ip5']),
      array("Ingresos planeados",$_POST['ir1'], $_POST['ir2'],
            $_POST['ir3'], $_POST['ir4'], $_POST['ir5']),
      array("Gastos reales ",$_POST['er1'], $_POST['er2'],
            $_POST['er3'], $_POST['er4'], $_POST['er5']),
      array(" Gastos planeados ",$_POST['ep1'], $_POST['ep2'],
            $_POST['ep3'], $_POST['ep4'], $_POST['ep5'])
        );

Regresemos otra vez al código presentado en el Listado 2. Después de construir el array de datos, creamos el objeto de la clase PHPlot, pero esta vez, al constructor de este objeto le pasaremos un parámetro que defina el área de la gráfica. Si llamaramos a este constructor sin parámetros, se le asignarían los valores por defecto, por lo que el área de la gráfica ocuparía un tamaño de 600x400 píxeles. En este momento, merece la pena enfatizar que a pesar de que en la gráfica utilizamos coordenadas cartesianas, los diferentes parámetros que deciden sobre el aspecto de la gráfica (como el tamaño de los puntos de datos, longitud de las etiquetas de los datos, el ancho de las series de datos) los definimos utilizando coordenadas de pantalla, es decir, píxeles.

Después de definir el área de la gráfica, descargamos el array de datos a PHPlot desde SetDataValues() con el parámetro que representa la tabla antes mencionada. En la siguiente línea definimos el tipo de datos (en nuestro caso, es el tipo texto-dato), y después llamamos a toda una serie de métodos que deciden sobre el aspecto de la gráfica (véase el apartado Métodos utilizados en graph.php, responsables del aspecto de la gráfica).

Después de los métodos de maquetación, recurrimos al método DrawGraph() que abre la gráfica en la ventana del navegador. Debemos subrayar que no es importante el orden en el que utilizamos los métodos . Lo único importante es que primero debemos crear el array de los datos y transferirlo al objeto, después diseñar la gráfica y, al final, aplicar DrawGraph().

Como mencionamos anteriormente, las funciones utilizadas en el script graph.php representan una pequeña parte de las muchas posibilidades que ofrece la librería PHPlot. Si queremos conocer otros métodos, deberíamos revisar la documentación de la librería.

Tal vez nos preguntamos porqué los elementos de diseño de la gráfica (el color de la línea, el estilo de las líneas, el estilo de los puntos de datos, etc.) no forman parte de los elementos de los arrays de datos. Dado que estas definiciones están relacionadas con las series de datos en forma concreta. Resulta ser que una solución así sería poco práctica. Por lo general, los datos presentados en la gráfica provienen de bases de datos, de páginas de negocios, o son introducidos manualmente. Son datos en crudo, sin información sobre su aspecto. Esto último se añade durante la creación de la gráfica. Soluciones similares fueron utilizadas en hojas de cálculos profesionales.

Como mencionamos anteriormente, parte de las definiciones se refieren solamente a ciertos tipos de gráficas (por ejemplo, a la función SetShading() que define el ancho de la sombra de las gráficas de barras, no se le encontrará un uso en las gráficas de líneas).

 Métodos utilizados en graph.php responsables del aspecto de la gráfica

SetPlotType()

define el tipo de la gráfica en base a su nombre en inglés , utilizado en el parámetro. Los nombres permitidos son: bar (de barras), lines (de líneas), linepoints (de líneas y puntos), area (de área), points (de puntos), pie (de pastel) y squared (escalonado),

SetVertTickIncrement()

define la distancia (expresada en coordenadas cartesianas) entre las etiquetas de datos colocadas a lo largo del eje Y. Por ejemplo, al proporcionarle el valor 3, las etiquetas consecutivas sobre el eje Y tendrán los valores 0, 3, 6, 9, 12, etc.

SetTickLength()

define la longitud de las etiquetas colocadas sobre los ejes X y Y, expresadas en píxeles.

SetTickColor()

define el color de las etiquetas de los datos. Al igual que en otros métodos responsables de la definición de colores, podremos utilizar los típicos nombres ingleses (por ejemplo: red, green, yellow, etc.) o tablas de tres elementos, que correspnden a los tres colores básicos RGB, por ejemplo: array(125,176,50),

SetPointShape()

le permite asignar una forma a los puntos de datos. Establecerlo sólo tiene sentido en el caso de aquellas gráficas en las que son visibles los puntos de datos (por ejemplo: gráficas de líneas y puntos). Los posibles valores del parámetro son: rec (rectángulo), circle (círculo), diamond (rombo), triangle (triángulo), dot (punto), line (segmento) y halfline (semisegmento),

SetPointSize()

define el tamaño de los puntos de datos expresados en píxeles,

SetTitle()

permite definir el título de la gráfica. El título será colocado en la parte superior de la gráfica,

SetXLabel()

permite definir el título del eje X,

SetYLabel()

en forma similar al anterior, pero para el eje de las Y,

SetLegend()

define el aspecto de la leyenda. El parámetro de este método es un array cuyos elementos corresponden a las series consecutivas de datos presentados en la gráfica,

SetLegendPixels()

define la posición de la leyenda en la gráfica. Los parámetros de este método están expresados en píxeles, y definen las coordenadas del extremo izquierdo superior de la leyenda. Se calculan en relación al extremo superior izquierdo de la pantalla,

SetLineWidth()

en el caso de gráficas de líneas, define el ancho de los segmentos que representan la serie de datos,

SetLineStyles()

define el estilo de las líneas que representan la serie de datos. Igual que el anterior, éste método también se refiere a gráficas de líneas. Los parámetros posibles son: dashed (línea discontinua) y solid (línea continua),

SetShading()

define el grosor de la sombra de las columnas de las gráficas de barras,

SetBackgroundColor()

define el color del fondo del área, sobre el cual está colocada la gráfica,

SetGridColor()

define el color del eje de la gráfica,

SetDataColors()

define los colores de las series de datos. El parámetro de este método es un array cuyos elementos correponden a las series de datos consecutivas, es decir, los elementos consecutivos de cualquiera de los arrays de valores (a excepción del primer elemento de estos arrays). Los parámetros en esta forma los aplicamos siempre que se ejecute el método que formatea las series de datos respectivas,

SetTextColor()

define el color en el que se desplegarán los valores del eje Y y las etiquetas del eje X,

SetTitleColor()

define el color del título de la gráfica y de los nombres de los ejes,

SetLightGridColor()

define el color de la escala de la gráfica, por ejemplo, las líneas auxiliares colocadas en las gráfica. Si no queremos visualizar esas líneas, debemos proporcionarles el mismo color que tiene el fondo.