Manual para el uso de vGraph

Manual para el uso de vGraph_Component
Autor: Fernando Rueda Sánchez
Manual para el uso de vGraph_Component
1. Objetivo
El objetivo de realizar este componente, es dotar de un subsistema de generación de
gráficas interactivas en tiempo real a cualquier aplicación de Velneo v7. Para ello se ha
realizado un paquete que simplifica el uso de OpenFlashChart, un software libre que hace
uso de la tecnología Flash y Javascript para la representación de gráficas vía web. El motivo
de utilizar este OpenFlashChart frente al API de Google, salta a la vista, ya que la
experiencia de usuario es completa. Es importante destacar que solo se utiliza un pequeño
conjunto de todas las opciones que permite OpenFlashChart, funcionalidades, que se
podrán ir añadiendo en el futuro por la comunidad. Recalcar que este proyecto incluye el
componente vTools liberado por Velneo anteriormente como parte de Open Apps.
2. Requisitos
Los requisitos para utilizar este componente son:
• Apache.
• vModApache.
• vServer.
• Licencia vServer para Apache.
• PlugIn Flash para Firefox.
3. Funcionamiento básico del componente.
El componente, contiene una base de datos, en ella se almacenan plantillas de gráficas, no
son más que porciones de código JSON que entiende OpenFlashChart, estas plantillas
establecen entornos fijos, y algunos parámetros variables. Dichos parámetros se
reemplazan por sus valores en tiempo de ejecución, dependiendo de las necesidades del
desarrollador. Por ejemplo, la plantilla BASIC contiene los datos para una gráfica básica,
3DBARSDUO contiene los datos para una gráfica de barras 3D con dos líneas de valores a
Página 1
Manual para el uso de vGraph_Component
Autor: Fernando Rueda Sánchez
representar, etc. Así pues, el componente consta de varias funciones que usadas en
conjunción con las plantillas nos permite crear las gráficas de una forma simple.
4. Instalación y configuración del componente
• Descargar este componente desde Open Apps.
• Instalar el componente en tú vServer.
• Instalar vModApache.
• Configurar vModApache. Ejemplo:
•
Añadir ‘ LoadModule velneo_module "C:\Program
Files\Velneo\V7\mod_velneo.so" ‘ en http.conf
•
Añadir también este bloque al final del fichero httpd.conf:
<Location /graph_server>
setHandler velneo
Vrl vatp://velneo:@localhost/VGRAPH_COMPONENTAPP
</Location>
•
•
Donde "velneo" es el nombre del usuario de vadmin que tiene permiso de
acceso a la instancia de proyecto de aplicación "VGRAPH_COMPONENTAPP",
"localhost" corresponde con el nombre o la IP del servidor que tiene el apache
instalado y la instancia (app) "VGRAPH_COMPONENTAPP" es el proyecto de
aplicación de vGraphComponent, debes asegurarte que le pones este nombre a
la instancia en vServer.
Probando la configuración:
•
Una vez instanciado y lanzado el apache hay que comprobar que sin ningún
vclient ni vdataclient abierto, existen los enganches de vmodapache. Es decir, si
cuando lanzamos apache se generan en vadmin tres enganches, vmodapache
está accediendo correctamente al proyecto.
•
En el navegador web probar si hay acceso al proyecto de aplicación de
vGraphComponent: http://localhost/graph_server/TRY. Debe salir un texto
indicando que funciona.
•
En el navegador web probar si hay acceso al proyecto de datos de
vGraphComponent:
http://localhost/graph_server/vGraph_component_dat/TRY. Debe salir un
texto indicando que funciona. ¡¡Cuidado!!, el nombre del proyecto de datos,
pues es "case sensitive" y hay que ponerlo como NOMBRE_PROYECTO_DATOS
seguido de _dat (minuscula), es decir: vGraph_component_dat.
Configurar el programa.
•
Copiar el contenido de htdocs.zip a la carpeta htdocs de nuestro Apache.
•
En el equipo donde resida vServer, instalar Firefox y su plugin Flash.
•
Establecer la variable global URL_CONSTRUCTOR_AG del proyecto de datos del
componente, ésta se usará como ruta base para el traspaso de parámetros al
proceso GRAPH_IT que es quien devuelve la gráfica.
5. Uso del componente por el desarrollador
Desde su solución debe heredar el proyecto de aplicación vGraph_component. Para
componer una gráfica, establecer sus valores y proyectarla se utilizan las siguientes
Página 2
Manual para el uso de vGraph_Component
Autor: Fernando Rueda Sánchez
funciones, todas necesitan que se le pase por parámetro como primer argumento la
variable que contiene la información de la gráfica (alfabética), ésta variable se crea con
GRAPH_CREATE() y por tanto esta función es la única que no la lleva como parámetro:
5.1.GRAPH_CREATE ()
Se utiliza para la creación del objeto gráfica, se almacena en una variable local de tipo
alfabética. Como parámetro se le pasa el nombre de la plantilla a utilizar, existente en
la tabla de TEMPLATEs.
Ej. Set (GRAPH_AL, fun:GRAPH_CREATE@vGraph_component.dat(“BASIC”))
5.2.GRAPH_TITLE_X (GRAFICA, TITULO_EJE_X)
Asigna el título del eje X.
Ej. Set (GRAPH_AL, fun:GRAPH_TITLE_X@vGraph_component.dat(GRAPH_AL, “Título
eje X”))
5.3.GRAPH_TITLE_Y (GRAFICA, TITULO_EJE_Y)
Asigna el título del eje Y.
Ej. Set (GRAPH_AL, fun:GRAPH_TITLE_Y@vGraph_component.dat(GRAPH_AL, “Título
eje Y”))
5.4.GRAPH_HEIGHT (GRAFICA, ALTO)
Asigna el alto del objeto gráfico dentro del HTML.
Ej. Set (GRAPH_AL, fun:GRAPH_HEIGHT@vGraph_component.dat(GRAPH_AL, 100))
5.5.GRAPH_WIDTH (GRAFICA, ANCHO)
Asigna el ancho del objeto gráfico dentro del HTML.
Ej. Set (GRAPH_AL, fun:GRAPH_WIDTH@vGraph_component.dat(GRAPH_AL, 80))
5.6.GRAPH_TEMPLATE (GRAFICA, NOMBRE_PLANTILLA)
Asigna la plantilla de la gráfica, aunque si se especificó en GRAPH_CREATE(), no es
necesario utilizar está función. Actualmente está en desuso.
Ej. Set (GRAPH_AL, fun:GRAPH_TEMPLATE@vGraph_component.dat(GRAPH_AL,
“BASIC”))
5.7.GRAPH_MAX_Y (GRAFICA, MAX_Y)
Asigna el valor máximo para Y. Actualmente en desuso, mejor usar GRAPH_Y_AXIS().
Ej. Set (GRAPH_AL, fun:GRAPH_MAX_Y@vGraph_component.dat(GRAPH_AL, 500))
5.8.GRAPH_MIN_Y (GRAFICA, MIN_Y).
Asigna el valor mínimo para Y. Actualmente en desuso, mejor usar GRAPH_Y_AXIS().
Ej. Set (GRAPH_AL, fun:GRAPH_MIN_Y@vGraph_component.dat(GRAPH_AL, 100))
5.9.GRAPH_STEP_X (GRAFICA, PASO_X)
Asigna el paso de etiquetas en X.
Ej. Set (GRAPH_AL, fun:GRAPH_STEP_X@vGraph_component.dat(GRAPH_AL, 5))
5.10.
GRAPH_STEP_Y (GRAFICA, PASO_Y)
Asigna el paso de etiquetas en Y. Actualmente en desuso, mejor usar GRAPH_Y_AXIS().
Ej. Set (GRAPH_AL, fun:GRAPH_STEP_Y@vGraph_component.dat(GRAPH_AL, 3))
5.11.
GRAPH_TITLE (GRAFICA, TITULO)
Página 3
Manual para el uso de vGraph_Component
Autor: Fernando Rueda Sánchez
Asigna el título del gráfico. Sus parámetros son el título y el estilo en formato CSS.
Ej. Set (GRAPH_AL, fun:GRAPH_TITLE@vGraph_component.dat(GRAPH_AL, “Título del
gráfico”, "{font-size: 20px; color: 0000ff; font-family: Verdana; text-align: center;}"))
5.12.
GRAPH_Y_AXIS (GRAFICA, MAX_Y, MIN_Y, PASO_Y)
Asigna propiedades máximo, mínimo y paso del eje Y, con una sola instrucción.
Ej. Set (GRAPH_AL, fun:GRAPH_Y_AXIS@vGraph_component.dat(GRAPH_AL,
MAX,MIN,STEP_Y))
5.13.
GRAPH_VALUES (GRAFICA, VALORES, NUM_LINEA_VALORES)
Asigna los valores a representar. Han de ir separados por coma (,).
NUM_LINEA_VALORES dependerá de la plantilla. Por ejemplo para BASIC, siempre será
1, pero para 3DBARSDUO existen dos líneas de valores: 1 y 2, de ahí que contenga la
palabra DUO en su nombre. Esto permite mostrar dos líneas de valores distintos
superpuestas. En el tutor del componente hay un ejemplo de un caso de dos líneas en
tensión, así se marca sobre la misma gráfica el valor del TAS y del TAD respecto a la
misma toma.
Ej. Set (GRAPH_AL, fun:GRAPH_VALUES@vGraph_component.dat(GRAPH_AL, “38, 45,
67, 23, 89, 145”, 1))
5.14.
GRAPH_TYPE (GRAFICA, TIPO, NUM_LINEA_VALORES)
Asigna el tipo, el tipo puede depender de la plantilla, podemos usar BASIC con varios
tipos, pero 3DBARSDUO está confeccionada para estar en 3D y el mejor efecto lo
conseguiremos con barras. Los tipos que utilizo en el tutor son: line y bar_3d. De este
modo podemos asignar a la línea de valores 1, un tipo line, pero a la línea de valores 2,
un tipo bar_3d, mezclando en una misma gráfica una gráfica de líneas y una de barras.
Ej. Set (GRAPH_AL, fun:GRAPH_TYPE@vGraph_component.dat(GRAPH_AL, “line”, 2))
5.15.
GRAPH_COLOUR (GRAFICA,)
Asigna el color del objeto que represente los valores (líneas, barras, etc.). El color se
representará por su codificación hexadecimal, tal y como lo usamos en una web, pero
sin el símbolo #.
Ej. Set (GRAPH_AL, fun:GRAPH_COLOUR@vGraph_component.dat(GRAPH_AL,
“0000ff”, 2))
5.16.
GRAPH_RENDER (GRAFICA, NUM_LINEA_VALORES)
Asigna en una variable, la URL que mostrará la gráfica pasada por parámetro.
NUM_LINEA_VALORES dependerá de la plantilla, y se usa para recorrer las
propiedades de cada línea. Es muy importante tener en cuenta que GRAPH_RENDER,
genera las URL usando como prefijo la variable global URL_CONSTRUCTOR_AG, dicha
variable en el tutor del componente, está modificable por el usuario en el formulario
de configuración.
Ej. Set (GRAPH_DISPLAY_URL,
fun:GRAPH_RENDER@vGraph_component.dat(GRAPH_AL, 2))
6. Descripción de las plantillas
Página 4
Manual para el uso de vGraph_Component
Autor: Fernando Rueda Sánchez
Este componente, se entrega con estas 4 plantillas, pero las plantillas las podéis fabricar
vosotros, con vuestras necesidades, solo tenéis que tener en cuenta la forma de
generarlas.
Tened en cuenta que las plantillas, son fragmentos de código JSON con marcas para
sustituirlas después desde nuestro componente por las propiedades adecuadas en cada
caso.
Para ver más información sobre OpenFlashChart aquí tenéis tutoriales
(http://teethgrinder.co.uk/open-flash-chart-2/tutorial.php) y los tipos de gráficas que
podeis construir (http://teethgrinder.co.uk/open-flash-chart-2/area-hollow.php), así como
los tipos de elementos que podéis usar (http://teethgrinder.co.uk/open-flash-chart-2/xaxis.php).
6.1. BASIC
Esta plantilla permite usar solo una línea de valores, la utilizaremos cuando queremos
simples gráficas de líneas. Por ejemplo una gráfica de temperatura.
6.2.3DBARS
Esta plantilla permite usar solo una línea de valores, la utilizaremos cuando queremos
simples gráficas de barras en 3D. Por ejemplo una gráfica de peso.
6.3.BASICDUO
Igual que BASIC, pero con dos líneas de valores. Por ejemplo una gráfica de tensión
que muestra la tensión arterial sistólica (TAS) y la tensión arterial diastólica (TAD)
sobre la misma gráfica.
6.4.3DBARSDUO
Igual que 3DBARS, pero con dos líneas de valores. Por ejemplo para comparar valores
de productos distintos en mismos periodos.
Página 5