Ejemplo: gráficos de velas
Los gráficos de velas (imagen siguiente) se suelen utilizar para visualizar la variación de las cotizaciones bursátiles. Estos gráficos muestra el valor de apertura y de cierre y el valor máximo y mínimo alcanzado durante la sesión bursátil.
En el gráfico anterior, por ejemplo, las velas muestran la cotización bursátil de una empresa ficticia, la empresa MyStock, entre las sesiones bursátiles del 11 de abril de 2011 y del 20 de abril de 2011. El punto máximo y el punto mínimo de la línea vertical de cada vela indican el valor máximo y el valor mínimo alcanzados en dicha sesión (la tabla siguiente que aparece más abajo muestra los precios). Si el cuerpo de la vela está coloreado, significa que el valor de cotización cayó durante la sesión bursátil, desde el valor de apertura hasta el valor de cierre. Si el cuerpo de la vela está vacío, significa que el valor subió del valor de apertura hasta el valor de cierre. Por ejemplo, en la sesión del 11 de abril, el valor cayó desde un valor de apertura de 210 hasta un valor de cierre de 203. Sin embargo, en la sesión del 12 de abril, el valor subió desde su valor de apertura de 205 hasta un valor de cierre de 218.
El otro tipo de gráfico de velas (imagen siguiente) muestra tres valores: (i) el valor máximo cotizado durante la sesión bursátil, (ii) el valor mínimo cotizado y (iii) el valor de cierre (la pequeña línea horizontal que corta la línea vertical).
Ejemplos de gráficos de velas
Los gráficos de velas utilizados como ejemplo en este apartado están en la carpeta (Mis) Documentos C:\Documents and Settings\<usuario>\Mis Documentos\Altova\StyleVision2024\StyleVisionExamples/Tutorial/Charts. El diseño SPS Candlestick.sps (imagen siguiente) utiliza el esquema XML Candlestick.xsd y el archivo XML de trabajo Candlestick.xml. En la vista Authentic (imagen siguiente), el usuario puede seleccionar los datos que deben aparecer en el gráfico de velas. El usuario puede elegir: (i) la compañía (puede elegir entre dos compañías diferentes), (ii) el período de tiempo, (iii) la extensión del eje Y y (iv) el intervalo de las marcas de graduación del eje Y. Además, la tabla que aparece bajo el gráfico sirve para introducir nuevos valores de cotización para las dos compañías (el usuario puede hacer clic con el botón derecho en una fila de la tabla y anexar/insertar un elemento Day nuevo).
Observe que al principio del diseño aparecen cuadros combinados y campos de entrada en los que el usuario de Authentic puede especificar los parámetros del gráfico que aparece más abajo. Estas especificaciones se almacenan dentro del archivo XML y se utilizan para calcular algunas opciones de configuración importantes del gráfico.
Archivo XML
La estructura permitida del documento XML es la que aparece en el fragmento siguiente. El elemento de documento Trades contiene un elemento Selection y un número ilimitado de elementos Stock. Cada elemento Stock puede contener un número ilimitado de elementos Day.
<Trades xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="Candlestick.xsd">
<Selection>
<Stock>Nanonull</Stock>
<StartDate>20110103</StartDate>
<EndDate>20110112</EndDate>
<YAxisStart>80</YAxisStart>
<YAxisEnd>180</YAxisEnd>
<YAxisTickInterval>20</YAxisTickInterval>
<WeekToView>25</WeekToView>
</Selection>
<Stock name="MyStock">
<Day id="20110103" year="2011" month="Jan" week="01" date="03">
<Open>90</Open>
<High>110</High>
<Low>88</Low>
<Close>105</Close>
</Day>
<Day id="20110104" year="2011" month="Jan" week="01" date="04">
<Open>100</Open>
<High>112</High>
<Low>92</Low>
<Close>109</Close>
</Day>
...
</Stock>
<Stock/>
...
<Stock/>
</Trades>
El elemento Selection contiene la información suministrada por el usuario de Authentic y esta información se utiliza a su vez para seleccionar los datos que se muestran en el gráfico. Por tanto, la selección de datos se basa en la información del elemento Selection. A continuación explicamos detalladamente cómo se realiza la selección de datos. Los datos sobre la variación del valor de cotización en una sesión bursátil determinada se almacenan en el elemento Stock/Day de dicha cotización (Stock) en dicha sesión (Day).
Selección de datos para el gráfico de velas
La selección de datos para el gráfico se especifica en el diálogo Configuración del gráfico (imagen siguiente), que se abre haciendo clic en el gráfico con el botón derecho y seleccionando el comando Editar configuración del gráfico. En este caso se utiliza una selección de datos básica para.
Así se configura este gráfico:
•En el diseño el gráfico se inserta dentro de un elemento Stock. Este elemento Stock tiene un filtro para seleccionar el elemento Stock cuyo atributo @id sea igual al contenido del elemento Selection/Stock. De modo que el nodo de contexto en el que se crea el gráfico es el elemento Stock seleccionado por el usuario de Authentic en el cuadro combinado Stock.
•La expresión XPath for-each selecciona todos los elementos Day que tienen un atributo @id cuyo valor sea mayor o igual a la fecha de inicio StartDate seleccionada por el usuario de Authentic y menor o igual que la fecha límite EndDate seleccionada por el usuario. Esto permite procesar los datos de las fechas seleccionadas por el usuario de Authentic. El nodo de contexto para las demás expresiones XPath utilizadas para la selección de datos en este cuadro de diálogo será el elemento Day (ver ejemplo siguiente).
<Day id="20110104" year="2011" month="Jan" week="01" date="04">
<Open>100</Open>
<High>112</High>
<Low>92</Low>
<Close>109</Close>
</Day>
•En el eje X del gráfico queremos mostrar las fechas. Para ello usamos la expresión XPath concat(@date, '-' @month). Esta expresión sirve para obtener la fecha de los atributos de los elementos Day correspondientes.
•En el eje Y queremos dibujar los valores de cotización. Para nuestro gráfico de velas usamos cuatro series: (i) el valor de apertura, (ii) el valor máximo de la sesión, (iii) el valor mínimo de la sesión y (iv) el valor de cierre. Para cada una de estas series identificamos respectivamente los elementos Day/Open, Day/High, Day/Low y Day/Close.
Importante: el orden en que se especifica la serie es muy importante y debe ser este:
•Gráficos de cuatro series: (i) Apertura, (ii) Máximo, (iii) Mínimo, (iv) Cierre.
•Gráficos de tres series: (i) Máximo, (ii) Mínimo, (iii) Cierre.
Los nodos que contienen los valores que se usarán para las series pueden tener cualquier nombre XML válido (es decir, no tienen por qué llamarse Open, High, etc.), pero sí deben contener valores numéricos.
Resto de opciones de configuración
Las demás opciones de configuración del gráfico se obtuvieron de forma dinámica a partir de los datos del archivo XML. Para definirlas se usó el botón Configuración dinámica....
•Como el nombre del gráfico necesita que el usuario de Authentic seleccione una fecha, el título del gráfico se establece de forma dinámica.
•El rango y el intervalo del eje Y también viene dado por el usuario y por tanto debe configurarse dinámicamente.
Temas relacionados:
Gráficos: resumen sobre cómo insertar y editar gráficos en el diseño SPS.
Configuración de gráficos: describe el cuadro de diálogo donde se definen las opciones de configuración del gráfico.
Selección de datos de gráficos: básica y Selección de datos de gráficos: flexible: explican cómo seleccionar los datos de los ejes del gráfico.