Manual para el uso de vgraph_component

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

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

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

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

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