Generación de gráficos en web mediante SVG y un agente LotusScript.
SVG es un nuevo lenguaje de programación basado en XML que permite la generación de gráficos vectoriales para ser visualizados mediante el navegador web. Esto nos ofrece a los desarrolladores muchas posibilidades, como por ejemplo la generación de gráficos estadísticos obteniendo los datos desde bases de datos Notes y generando la salida web mediante agentes.
Si queréis obtener una información detallada acerca del SVG podéis leer la página oficial del W3 Consortium dedicada al SVG.
El recurso que os presento en esta ocasión es muy sencillo de entender, sencillamente se trata de un agente LotusScript que genera una salida estándar enviando los datos XML que producen el gráfico SVG. Para poder visualizar este gráfico debéis descargaros e instalar el visualizador SVG, esto lo podéis realizar desde la página web de Adobe.
Vamos a ver los pasos a seguir:
1. Paso: Crear un agente LotusScript llamado GenerarSVG en la base de datos Notes que queráis. Este agente debe tener marcada la propiedad Ejecutar el agente como usuario de Web y en el atributo ¿Sobre qué documentos actuar? deberá seleccionarse la opción Ejecutar una sola vez. Dentro del evento Initialize insertaremos el siguiente código:
Sub Initialize
Dim db As NotesDatabase Dim SVG As String Set db = session.CurrentDatabase Print "Content-type: image/svg+xml" SVG=|<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="500" height="500"> <line x1="38" y1="406" x2="469" y2="406" transform="translate(38 406) scale(0.895364 1) translate(-38 -406) translate(26.8047 60)" style="fill:none;stroke:rgb(0,0,0);stroke-width:4"/> <rect x="58" y="91" width="51" height="311" transform="translate(90.1961 0) translate(-98.0392 0) translate(0 1) translate(0 1) translate(0 -1) translate(0 1) translate(24 60)" style="fill:rgb(0,0,255);stroke:rgb(0,0,0);stroke-width:1"/> <rect x="225" y="95" width="51" height="311" transform="translate(-111.765 -5.88235) translate(0 1.96078) translate(250.5 406) scale(1 0.571275) translate(-250.5 -406) translate(0 1.75047) translate(0 1.75047) translate(24 105.028)" style="fill:rgb(255,0,0);stroke:rgb(0,0,0);stroke-width:1"/> <rect x="225" y="95" width="51" height="311" transform="translate(115.686 0) translate(-135.294 -5.88235) translate(-33.3333 1.96078) translate(5.88235 0) translate(154.902 -7.84314) translate(-156.863 7.84314) translate(0 1) translate(0 1) translate(-1 0) translate(1 0) translate(24 60)" style="fill:rgb(255,255,0);stroke:rgb(0,0,0);stroke-width:1"/> <rect x="225" y="95" width="51" height="311" transform="matrix(1 0 0 1 -0.01995 0.07843) translate(150.98 -13.7255) translate(-139.216 11.7647) translate(250.5 406) scale(1 0.747809) translate(-250.5 -406) translate(24 80.2344)" style="fill:rgb(0,92,130);stroke:rgb(0,0,0);stroke-width:1"/<> <rect x="225" y="95" width="51" height="311" transform="matrix(1 0 0 0.747809 -0.25595 63.5072) translate(74.5098 47.1967) translate(0 1.33724) translate(0 1.33724) translate(250.5 406) scale(1 1.5986) translate(-250.5 -406) translate(24 50.1904)" style="fill:rgb(227,189,9);stroke:rgb(0,0,0);stroke-width:1"/> <rect x="225" y="95" width="51" height="311" transform="matrix(1 0 0 1.19545 0.25385 -48.9399) translate(135.294 -29.5238) translate(250.5 406) scale(1 0.288012) translate(-250.5 -406) translate(0 2.90442) translate(0 2.90442) translate(0 2.90442) translate(24 174.265)" style="fill:rgb(255,255,192);stroke:rgb(0,0,0);stroke-width:1"/> <text x="125px" y="52px" transform="translate(22 2)" style="fill:rgb(0,0,0);font-size:24;font-family:Verdana">Barras verticales</text> </svg>| Print SVG |
2. Paso: Guardar el agente y ejecutarlo desde el navegador web utilizando la siguiente URL:
http://www.servidor_web/base_datos.nsf/GenerarSVG?OpenAgent
Si habéis instalado correctamente el visualizador deberíais ver algo como esto:
Explicación: Este agente es muy sencillo, solamente genera una salida estándar con todo el texto del archivo XML. Lo que es interesante es que se puede alterar la información de los gráficos utilizando variables y leyendo la información desde una vista de Notes (por ejemplo).
Reconozco que este tema me ha interesado mucho y seguiré investigando para publicar un recurso que haga algo parecido a lo comentado (lectura de datos y generación interactiva de gráficos estadísticos) aunque esto será más adelante. De momento os recomiendo el editor WebDraw de JASC Software, un programa fantástico para generar SVG de forma sencilla y que además se puede probar de forma gratuita.