Línea de tiempo

Conceptos básicos

Descarga e instalación

Qlik Sense Desktop

Para instalar la Timeline Extension en Qlik Sense Desktop, haga lo siguiente:

1. Descargue la Timeline Extension para Qlik Sense.
2. Extraiga el archivo.
3. Abra una ventana del Explorador de Windows y navegue al directorio Extensions de Qlik Sense:
   ..\Users\<UserName>\Documents\Qlik\Sense\Extensions.
4. Copie la carpeta anygantt-4x-timeline al directorio Extensions.
5. Reinicie Qlik Sense Desktop.

Qlik Sense Server

Para instalar la Timeline Extension en un servidor de Qlik Sense,

1. Descargue la Timeline Extension para Qlik Sense.
2. Abra la Qlik Management Console (QMC): https://<QPS server name>/qmc
3. Seleccione Extensions en la página de inicio de la QMC o desde el menú desplegable Start.
4. Haga clic en Import en la barra de acciones.
5. En el cuadro de diálogo, seleccione el archivo descargado. Deje el área de la contraseña en blanco.
6. Haga clic en Open en la ventana del explorador de archivos.
7. Haga clic en Import.

Qlik Sense Cloud

Para instalar la Timeline Extension en Qlik Sense Cloud, haga lo siguiente:

1. Descargue la Timeline Extension para Qlik Sense Cloud.
2. Extraiga el archivo.
3. Acceda a la Management Console:
   1. *añada /console a la dirección de su tenant: https://<your tenant address>/console
   2. *o use el enlace de navegación Administration bajo el perfil de usuario en el hub

1. Vaya a la página Extensions y haga clic en Add.
2. En el cuadro de diálogo, seleccione el archivo con la Extension en el paquete – por ejemplo, anygantt-4x-timeline.zip.
3. Haga clic en Add.
4. Repita los pasos anteriores para añadir otras Extensions.
5. En la Management Console, vaya a la sección Content Security Policy y haga clic en Add.
6. En el cuadro de diálogo, dé un nombre a la Content Security Policy – por ejemplo, AnyChart.
7. Escriba la dirección del servidor de origen: qlik.anychart.com
8. Seleccione las siguientes directivas:
   1. connect-src
   2. font-src
   3. img-src
   4. script-src
   5. style-src

1. Haga clic en Add.

Resumen

El Timeline chart es una visualización de eventos en orden cronológico. Muestra tanto eventos que ocupan periodos de tiempo (rangos) como eventos con duración cero (momentos). Los eventos y las fechas se muestran en una barra horizontal larga (eje).

Los ajustes disponibles de rangos y momentos incluyen: predeterminados / color por expresión, etiquetas e información sobre herramientas. También puede añadir líneas de referencia y rangos de referencia, configurar la escala y el eje, establecer el locale, etc.

Inicio rápido

Este breve tutorial explica cómo crear un Timeline chart básico.

En primer lugar, añada un gráfico vacío a su hoja:

1. Vaya a Custom objects > AnyGantt en el panel de activos.
2. Arrastre un gráfico AnyGantt Timeline vacío a la hoja.

A continuación, añada una dimension que represente los eventos:

1. Vaya a Dimensions en el panel de propiedades.
2. Haga clic en Add dimension y seleccione una dimensión.

Finalmente, añada dos measures – las fechas de inicio y fin:

1. Vaya a Measures en el panel de propiedades.
2. Haga clic en Add measure y seleccione una medida.
3. Haga clic en Add measure y seleccione una medida.

Tenga en cuenta que también puede crear dimensiones y medidas a partir de campos o añadirlas haciendo clic en los botones del gráfico vacío.

Dimensiones y medidas

Dimensiones

Para añadir una dimensión, haga lo siguiente:

1. Vaya a Dimensions en el panel de propiedades.
2. Haga clic en Add dimension y seleccione una dimensión.

El Timeline chart requiere solo una dimensión, que representa los eventos.

De forma predeterminada, las etiquetas de los eventos muestran el campo de datos o la expresión que utiliza como dimensión. Pero pueden mostrar un texto diferente si es necesario. Por ejemplo, puede utilizar identificadores numéricos de eventos como dimensión y, al mismo tiempo, mostrar los nombres de los eventos como etiquetas. Consulte la sección Etiquetas para obtener más información.

Medidas

Para añadir una medida, haga lo siguiente:

1. Vaya a Measures en el panel de propiedades.
2. Haga clic en Add measure y seleccione una medida.

Basta con añadir una sola medida: la fecha de inicio. Sin embargo, en este caso todos los eventos se muestran como momentos. Para crear rangos, debe añadir una segunda medida: la fecha de fin.

Eventos

Los eventos son las partes del Timeline chart que representan intervalos de tiempo o simplemente momentos en la línea de tiempo. Correspondientemente, existen dos tipos de eventos:

• rangos
• momentos

Esta sección explica la diferencia entre rangos y momentos y cómo añadirlos. Para aprender a configurar eventos, lea las siguientes secciones:

Rangos

Los rangos muestran eventos que tienen duración.

Para añadir rangos, debe añadir dos medidas: las fechas de inicio y fin. Haga lo siguiente:

1. Vaya a Measures en el panel de propiedades.
2. Haga clic en Add measure y seleccione una medida.
3. Haga clic en Add measure y seleccione una medida.

Momentos

Los momentos muestran eventos con duración cero. Solo requieren una medida (la fecha).

Para añadir momentos, simplemente añada rangos. Si en sus datos hay elementos con una sola fecha, AnyGantt los muestra automáticamente como momentos.

Configuración de eventos

Predeterminados

Rangos

Puede cambiar los ajustes de apariencia predeterminados de los rangos: la dirección, la altura, el color de relleno y el grosor del trazo. El color del trazo se ajusta automáticamente al color de relleno.

Para establecer los valores predeterminados de los rangos, vaya a Appearance > Defaults en el panel de propiedades, haga clic en Ranges y haga lo siguiente:

• Para establecer la dirección, seleccione Up o Down en el menú desplegable Direction.
• Para establecer la altura, utilice la opción Height.
• Para configurar el relleno, vaya a Fill, establezca el Type de relleno y utilice las opciones disponibles a continuación.
• Para configurar el trazo, vaya a Stroke y utilice la opción Thickness.

Tenga en cuenta que la dirección de los eventos afecta a su posición con respecto al eje y a la posición del propio eje. Por ejemplo, aquí la dirección de los rangos está establecida en Down:

Los rangos admiten los siguientes tipos de relleno y ajustes:

Relleno sólido

Relleno de paleta

Momentos

Los momentos se componen de dos partes: pins y marcadores.

Puede cambiar los ajustes de apariencia predeterminados de los momentos: la dirección, los colores de los pins y marcadores, la forma y el tamaño de los marcadores. Además, puede utilizar imágenes personalizadas como marcadores.

Para establecer los valores predeterminados de los momentos, vaya a Appearance > Defaults en el panel de propiedades, haga clic en Moments y haga lo siguiente:

• Para establecer la dirección, seleccione Up o Down en el menú desplegable Direction.
• Para configurar los pins, vaya a Pins y utilice las opciones Stroke, Stroke type y Thickness.
• Para configurar los marcadores, vaya a Markers y utilice las opciones Type, Fill (disponible solo para formas integradas), Stroke, Thickness y Size.

Tenga en cuenta que la dirección de los eventos afecta a su posición con respecto al eje y a la posición del propio eje. Por ejemplo, aquí la dirección de los momentos está establecida en Down:

Aquí se muestra cómo establecer el tipo de marcadores en Markers > Type:

	Haga clic en el pictograma "icon" y seleccione un icono (forma) integrado en el menú desplegable.
	Haga clic en el pictograma "image" e introduzca un enlace a una imagen personalizada en el cuadro de entrada Image URL.

Color por expresión

Puede colorear rangos y momentos como desee. Hay dos opciones disponibles: coloración predeterminada, que se describe arriba, y coloración por expresión, descrita en esta sección.

La coloración por expresión establece los colores mediante una expresión definida por el usuario. Al colorear por expresión, puede definir tanto qué colores usar como con qué valores usarlos, lo que permite un mayor control sobre cómo se usan los colores en la visualización. Por ejemplo, puede resaltar valores de especial interés o diferenciar entre valores dentro de distintos rangos de valores. La coloración por expresión también se puede utilizar para colorear una visualización por valores no incluidos en ella, como colorear eventos por el país, la importancia, el número de participantes, etc.

Para colorear un evento por expresión, haga lo siguiente:

1. Vaya a Add-Ons > Data settings en el panel de propiedades.
2. Haga clic en Add setting.
3. Seleccione Ranges o Moments en el primer menú desplegable.
4. Seleccione la opción Color string en el segundo menú desplegable.
5. Introduzca una expresión en el cuadro de entrada.

Ejemplos

He aquí algunos ejemplos para mostrar lo que puede hacer con las expresiones por color.

Ejemplo: Coloración por un único valor de medida

If((Interval(finish_date) - Interval(start_date)) > 365 * 2, 'lightgreen', 'lightgray')

En este ejemplo, hay una condición. Si la duración de los rangos es > 2 años, se colorearán de 'lightgreen', de lo contrario se colorearán de 'lightgray'.

Ejemplo: Coloración por múltiples valores de medida

If(group_name = 'Research & Development', 'lightgray',
If(group_name = 'Preclinical Studies', 'lightblue',
If(group_name = 'Clinical Trials', 'lightgreen',
If(group_name = 'Review & Approval', 'salmon'))))

En este ejemplo, hay múltiples condiciones: cada evento se asigna a uno de cuatro grupos, y los rangos que pertenecen a grupos diferentes se colorean con colores distintos.

Etiquetas

Las etiquetas son objetos de texto que muestran la información sobre los rangos y momentos. Cada uno de los dos tipos de eventos tiene sus propios ajustes de etiqueta.

De forma predeterminada, las etiquetas muestran el campo de datos o la expresión que utiliza como dimension, pero puede personalizar el texto.

Tenga en cuenta que es posible establecer el texto de la etiqueta como un valor de cadena o como una expresión de cadena arbitraria. El uso de expresiones le permite resaltar valores de especial interés, mostrar valores no incluidos en una visualización o resultados de cálculos, etc.

Además, puede utilizar HTML en las etiquetas.

Para establecer el texto de las etiquetas,

1. Vaya a Add-ons > Label settings en el panel de propiedades.
2. Haga clic en Ranges o Moments.
3. Seleccione la opción Custom text en el menú desplegable.
4. Introduzca un valor de cadena o una expresión de cadena en el cuadro de entrada.

Para configurarlas, utilice las opciones siguientes:

• Para configurar el fondo (disponible solo para los momentos), active el interruptor Background y utilice las opciones Fill, Opacity, Corner type, Border type y Border radius.
• Para configurar la fuente, active el interruptor Font y utilice las opciones Style, Color, Size, Family y Shadow.
• Para establecer el límite de caracteres, active el interruptor Character limit e introduzca un número en el cuadro de entrada.

En el ejemplo siguiente, las etiquetas de los rangos y momentos tienen diferentes ajustes de texto, fondo y fuente y muestran las siguientes expresiones:

Ranges

'<b>' & event_name & '</b>' &
'<br>' & Date(start_date, 'MM.YYYY') & ' – ' & Date(finish_date, 'MM.YYYY')

Moments

'<b>' & event_name & '</b>' &
'<br>' & Date(start_date, 'MM.YYYY')

Información sobre herramientas

La información sobre herramientas (tooltips) son cuadros de texto que aparecen cuando el usuario pasa el ratón sobre los eventos. Puede establecer un texto de información sobre herramientas personalizado por separado para los rangos y momentos.

Tenga en cuenta que es posible establecer el texto de la información sobre herramientas como un valor de cadena o como una expresión de cadena arbitraria. El uso de expresiones le permite resaltar valores de especial interés, mostrar valores no incluidos en una visualización o resultados de cálculos, etc.

Además, puede utilizar HTML en la información sobre herramientas.

Para desactivar o activar la información sobre herramientas, vaya a Interactivity en el panel de propiedades y active el interruptor Tooltips.

Para configurar la información sobre herramientas, vaya a Add-ons > Tooltip settings en el panel de propiedades y haga lo siguiente:

• Para configurar el fondo, active el interruptor Background y utilice las opciones Fill y Opacity.
• Para configurar la fuente, active el interruptor Font y utilice las opciones Style, Color, Size y Family.

Este es el aspecto que pueden tener el fondo y la fuente de la información sobre herramientas tras la configuración:

Para establecer el texto de la información sobre herramientas y el límite de caracteres de los rangos o momentos, haga lo siguiente:

1. Vaya a Add-ons > Tooltip settings en el panel de propiedades.
2. Haga clic en Add tooltip.
3. Seleccione Ranges o Moments en el menú desplegable.
4. Introduzca un valor de cadena o una expresión de cadena en el cuadro de entrada.
5. Active el interruptor Character limit e introduzca un número en el cuadro de entrada.
   (Esta opción solo estará disponible después de establecer el texto).

He aquí un ejemplo de expresión para configurar el texto de información sobre herramientas de los rangos:

'<b>' & event_name & '</b>' &
'<br><i>' & group_name & '</i>' &
'<br><br>Start Date: ' & Date(start_date, 'MM.DD.YYYY') &
'<br>Finish Date: ' & Date(finish_date, 'MM.DD.YYYY')

Otras características

Líneas de referencia

Una línea de referencia es una línea que corta un punto determinado del eje.

Puede añadir una o varias líneas de referencia a un gráfico para indicar una fecha o fechas determinadas. La línea de referencia solo se dibuja si cae dentro del rango de visualización actual.

Tenga en cuenta que es posible especificar el valor que define la posición de una línea de referencia como un valor de fecha o como una expresión de fecha arbitraria.

Para añadir una línea de referencia, haga lo siguiente:

1. Vaya a Add-ons > Reference lines en el panel de propiedades.
2. Haga clic en Add reference line.
3. Introduzca un valor de fecha o una expresión de fecha en el cuadro de entrada Date.

A continuación, configúrela:

• Para añadir una etiqueta de texto, introduzca una cadena de texto en el cuadro de entrada Label.
• Para configurar el trazo, utilice las opciones Stroke, Stroke type y Thickness.
• Para configurar la posición de la etiqueta, utilice las opciones Label orientation y Label position.
• Para configurar la fuente, active el interruptor Font y utilice las opciones Style, Color, Size, Family y Shadow.

Rangos de referencia

Un rango de referencia es un área que corta un rango determinado de puntos en el eje.

Puede añadir uno o varios rangos de referencia a un gráfico para indicar un periodo o periodos de tiempo determinados. El rango de referencia solo se dibuja si cae dentro del rango de visualización actual.

Tenga en cuenta que es posible especificar los valores que definen la posición de un rango de referencia ya sea como valores de fecha o como expresiones de fecha arbitrarias.

Para añadir un rango de referencia, haga lo siguiente:

1. Vaya a Add-ons > Reference range en el panel de propiedades.
2. Haga clic en Add reference range.
3. Introduzca un valor de fecha o una expresión de fecha en el cuadro de entrada From.
4. Introduzca un valor de fecha o una expresión de fecha en el cuadro de entrada To.

A continuación, configúrelo:

• Para añadir una etiqueta de texto, introduzca una cadena de texto en el cuadro de entrada Label.
• Para configurar el relleno, utilice las opciones Color y Opacity.
• Para configurar la posición de la etiqueta, utilice las opciones Label orientation y Label position.
• Para configurar la fuente, active el interruptor Font y utilice las opciones Style, Color, Size, Family y Shadow.

Escala

AnyGantt Extension opera una escala que usted puede configurar. Es posible establecer el rango de fechas que el gráfico muestra por defecto, así como el mínimo y el máximo de la escala.

Tenga en cuenta que puede especificar todas estas fechas como valores de fecha o como expresiones de fecha arbitrarias.

Rango de visualización predeterminado

De forma predeterminada, el gráfico se aleja al máximo. También se puede acercar a un rango de fechas personalizado. Sin embargo, los usuarios podrán seguir alejando el gráfico mediante la rueda del ratón (u otras funciones de interacción), si el mínimo y el máximo de la escala lo permiten.

Para establecer el rango de visualización predeterminado, haga lo siguiente:

1. Vaya a Appearance > Scale > Display range en el panel de propiedades.
2. Cambie Display range de Auto a Custom.
3. Introduzca un valor de fecha o una expresión de fecha en el cuadro de entrada From.
4. Introduzca un valor de fecha o una expresión de fecha en el cuadro de entrada To.

En el siguiente ejemplo, el rango de visualización predeterminado se establece entre el 1 de enero de 2012 y 2016:

Date#('01.01.2015', 'MM.DD.YYYY')

Date#('01.01.2018', 'MM.DD.YYYY')

Este es el aspecto que tiene por defecto el gráfico con estos ajustes:

Mínimo y máximo

Cuando aleja el gráfico al máximo mediante la rueda del ratón (u otras funciones de interacción), verá el rango de fechas comprendido entre el mínimo y el máximo de la escala. Por defecto, AnyGantt los ajusta para mostrar todos los eventos del gráfico.

Para establecer la fecha mínima de la escala,

1. Vaya a Appearance > Scale > Minimum en el panel de propiedades.
2. Cambie Minimum de Auto a Custom.
3. Si es necesario, marque la casilla Soft para activar el modo suave.
4. Introduzca un valor de fecha o una expresión de fecha en el cuadro de entrada.

Para establecer la fecha máxima de la escala,

1. Vaya a Appearance > Scale > Maximum en el panel de propiedades.
2. Cambie Maximum de Auto a Custom.
3. Si es necesario, marque la casilla Soft para activar el modo suave.
4. Introduzca un valor de fecha o una expresión de fecha en el cuadro de entrada.

En este ejemplo, el mínimo se establece en 5 años antes de la fecha de inicio más temprana, y el máximo se establece en 10 años después de la fecha de finalización más tardía:

Min(start_date) - 365 * 5

Max(finish_date) + 365 * 5

Así es como se ve el gráfico con estos ajustes cuando se aleja al máximo:

Modo suave

Para activar el modo suave, marque la casilla Soft cuando establezca el mínimo y el máximo de la escala.

El modo suave ajusta el mínimo y el máximo a los eventos. Esto es importante cuando hay eventos o partes de eventos anteriores al mínimo o posteriores al máximo.

Por ejemplo, si establece el mínimo el 1 de enero de 2015 y activa el modo suave, el gráfico seguirá mostrando todos los eventos y partes de eventos anteriores a esa fecha. Activar el modo suave tanto para el mínimo como para el máximo garantiza que siempre sea posible alejar el gráfico para ver todos los elementos.

A continuación se muestra un Timeline chart con el mínimo y el máximo de la escala fijados en el 1 de enero de 2015 y 2018:

Date#('01.01.2015', 'MM.DD.YYYY')

Date#('01.01.2018', 'MM.DD.YYYY')

El modo suave está desactivado tanto para el mínimo como para el máximo:

Aquí está el mismo gráfico con el modo suave activado solo para el mínimo:

Aquí el modo suave está activado solo para el máximo:

Eje

Un eje es una barra horizontal larga que muestra las fechas. Puede ajustar su altura, colores y fuente. Es posible aplicar diferentes ajustes de trazo al propio eje y a sus marcas. Además, el eje se ve afectado por el locale.

Para configurar el eje, vaya a Appearance > Axis en el panel de propiedades y haga lo siguiente:

• Para establecer la altura, utilice la opción Height.
• Para configurar el relleno y el trazo, utilice las opciones Fill, Stroke y Thickness.
• Para configurar las marcas, vaya a Ticks y utilice las opciones Stroke y Thickness.
• Para configurar la fuente de las etiquetas, vaya a Labels, active el interruptor Font y utilice las opciones Style, Color, Size, Family y Shadow.

Niveles de zoom

En cada nivel de zoom, el eje muestra ciertas unidades de tiempo. Para establecerlas,

1. Vaya a Appearance > Timeline en el panel de propiedades.
2. Haga clic en Zoom levels para abrir la ventana con los ajustes.
3. Configure los niveles de zoom.
4. Haga clic en Save y Close.

Aquí está la ventana con los ajustes predeterminados de los niveles de zoom:

Por defecto, hay 9 niveles de zoom. El número máximo de niveles disponibles también es 9. En la ventana Zoom levels, puede eliminar y duplicar niveles haciendo clic en los botones situados a su derecha. Para restaurar los ajustes predeterminados, haga clic en Restore defaults.

Para cada nivel de zoom, puede especificar una unidad de tiempo y un número de unidades. Los niveles se organizan automáticamente en el orden correcto tras cerrar el menú.

En el siguiente ejemplo, hay un gráfico con un solo nivel de zoom:

Locale

De forma predeterminada, AnyGantt lee el locale de Qlik y lo aplica a los formatos de fecha/hora utilizados en las etiquetas del eje y en la información sobre herramientas. Puede seleccionar otro locale:

1. Vaya a Appearance > Locale en el panel de propiedades.
2. Desmarque la casilla Use Qlik locale.
3. Seleccione un locale en el menú desplegable.

AnyGantt admite los siguientes locales:

• Chino (República Popular China)
• Chino (Taiwán)
• Holandés (Países Bajos)
• Inglés (Estados Unidos)
• Francés (Francia)
• Alemán (Alemania)
• Italiano (Italia)
• Japonés (Japón)
• Coreano (Corea)
• Polaco (Polonia)
• Portugués (Brasil)
• Ruso (Rusia)
• Español (España)
• Sueco (Suecia)
• Turco (Turquía)

Aquí hay un Timeline chart con el locale chino:

Interacción

De forma predeterminada, están disponibles las siguientes funciones de interacción: selección, instantáneas (snapshots), información sobre herramientas y la posibilidad de ampliar el gráfico con la rueda del ratón. También puede activar herramientas de navegación adicionales que permiten desplazarse y ampliar el gráfico: el scroller y los controles de zoom.

Para desactivar o activar estas funciones, vaya a Interactivity en el panel de propiedades y active los siguientes interruptores:

• Selection
• Snapshots
• Tooltips
• Scroller
• Zoom controls
• Zoom with mouse wheel

En esta captura de pantalla, el scroller y los controles de zoom están activados: