Gráfico De Diana

Conceptos básicos

Descarga e instalación

Qlik Sense Desktop

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

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

Qlik Sense Server

Para instalar la AnyChart Bullseye Extension en un servidor de Qlik Sense,

1. Descargue la AnyChart Bullseye 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 AnyChart Bullseye Extension en Qlik Sense Cloud, haga lo siguiente:

1. Descargue la AnyChart Bullseye Extension para Qlik Sense Cloud.
2. Acceda a la Management Console:
   • añada /console a la dirección de su inquilino: https://<your tenant address>/console
   • o utilice el enlace de navegación Administration bajo el perfil de usuario en el centro (hub)

1. Vaya a la página de Extensions y haga clic en Add.
2. En el cuadro de diálogo, seleccione el archivo descargado.
3. Haga clic en Add.
4. En la Management Console, vaya a la sección Content Security Policy y haga clic en Add.
5. En el cuadro de diálogo, asigne un nombre a la Content Security Policy; por ejemplo, AnyChart.
6. Escriba la dirección del servidor de origen: qlik.anychart.com
7. Seleccione las siguientes directivas:
   • connect-src
   • font-src
   • img-src
   • script-src
   • style-src

1. Haga clic en Add.

Resumen

El Bullseye chart es una herramienta que muestra puntos de datos como marcadores distribuidos a través de un conjunto de anillos concéntricos, que representan categorías ordinales o rangos de valores numéricos.

Puede configurar la apariencia del gráfico: establecer los colors, ajustar los markers, legend, axes, y grids, establecer el start angle y el inner radius, habilitar y configurar las labels, y establecer el texto de los tooltips.

Además, están disponibles las siguientes opciones: interactivity y calculation conditions.

Inicio rápido

Este tutorial rápido explica cómo crear un Bullseye chart básico.

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

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

A continuación, añada tres dimensions, la primera representando categorías nominales (los grupos de puntos de datos), la segunda categorías ordinales (los nombres de los anillos) y la tercera los IDs de los puntos:

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

Alternativamente, es posible añadir dos dimensiones y una measure si la estructura de sus datos así lo requiere.

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

Dimensions

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.

Dependiendo de la estructura de datos, puede añadir dos o tres dimensiones.

Measures

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.

Dependiendo de la estructura de datos, puede añadir una medida o crear un gráfico sin medidas.

Estructuras de datos

El Bullseye chart admite dos formas diferentes de establecer los datos (estructuras de datos). Debe seleccionar la que mejor se adapte a sus datos.

3 Dimensiones

Si desea que el eje Y muestre categorías ordinales (los nombres de los anillos), añada tres dimensions:

• La primera dimensión (Categories) representa los nombres de las categorías nominales, que se muestran en el X-axis.
• La segunda dimensión (Rings) representa los nombres de los anillos, que se muestran en el Y-axis.
• La tercera dimensión (ID) representa los IDs de los puntos de datos.

Tenga en cuenta que el orden de las categorías en el eje Y se define mediante la configuración de clasificación de la segunda dimensión.

2 Dimensiones + 1 Medida

Si desea que el eje Y muestre valores numéricos, añada dos dimensions y una measure:

• La primera dimensión (Categories) representa los nombres de las categorías nominales, que se muestran en el X-axis.
• La segunda dimensión (ID) representa los IDs de los puntos de datos.
• La medida (Rings) representa valores numéricos, que se muestran en el Y-axis.

Tenga en cuenta que cuando el eje Y muestra valores numéricos, es posible establecer el scale type (lineal o logarítmico).

Apariencia

Colors

AnyChart Bullseye admite diferentes formas de colorear los markers del gráfico.

Uno de los modos de color (By dimension) también afecta a la legend. Además, dependiendo del modo, la leyenda está disponible o no.

Para seleccionar un modo de color,

1. Vaya a Appearance > Colors and legend en el panel de propiedades.
2. Active el control deslizante Colors.
3. Seleccione un modo de color del menú desplegable.

La siguiente tabla explica la diferencia entre los distintos modos y enumera los ajustes disponibles para cada uno de ellos:

Color único

Puede establecer un color, que se aplica a todos los markers:

1. Vaya a Appearance > Colors and legend en el panel de propiedades.
2. Active el control deslizante Colors.
3. Seleccione Single color del menú desplegable.
4. Utilice las opciones Color y Opacity.

En este modo, la legend no está disponible.

Color por dimensión

Puede utilizar las paletas integradas para colorear markers por cualquier dimensión (dependiendo de la estructura de datos, hay dos o tres dimensiones):

1. Vaya to Appearance > Colors and legend en el panel de propiedades.
2. Active el control deslizante Colors.
3. Seleccione By dimension del menú desplegable.
4. Seleccione una dimensión del menú desplegable Select dimension.
5. Seleccione una paleta y utilice las opciones Reverse colors y Opacity.

La legend se genera y colorea automáticamente. Sin embargo, siempre puede desactivarla o personalizarla si es necesario.

En esta captura de pantalla, los marcadores y la leyenda están coloreados por la primera dimensión:

Aquí los marcadores y la leyenda están coloreados por la segunda dimensión:

Color por expresión

Si la estructura de datos del gráfico incluye una medida, puede colorear sus markers por expresión:

1. Vaya to Appearance > Colors and legend en el panel de propiedades.
2. Active el control deslizante Colors.
3. Seleccione By expression del menú desplegable.
4. Introduzca una expresión en el cuadro de entrada Expression.

Además, la forma de los marcadores también se puede establecer condicionalmente. La legend está disponible, pero debe añadir y colorear manualmente cada elemento.

Colorear por expresión establece los colores mediante una expresión definida por el usuario. Al colorear por expresión, puede definir tanto los colores que desea utilizar como los valores con los que desea utilizarlos, lo que permite un mayor control sobre cómo se utilizan 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. Colorear por expresión también se puede utilizar para colorear una visualización mediante valores no incluidos en ella, como colorear marcadores mediante medidas o dimensiones alternativas.

Ejemplos

A continuación se presentan algunos ejemplos para mostrar lo que puede hacer con las expresiones por color. Tenga en cuenta que las expresiones no afectan a la leyenda, por lo que en estos ejemplos se configura manualmente.

Ejemplo: Colorear por medida

If(Price < 1, 'green',
If(Price < 100, 'gold',
If(Price < 1000, 'orange', 
If(Price >= 1000, 'red'))))

En este ejemplo, 4 colores indican 4 rangos de la medida mostrada en el Y-axis (precio).

Ejemplo: Colorear por medida alternativa

If(EstimatedCompletionTime < 4, 'red',
If(EstimatedCompletionTime < 8, 'orange',
If(EstimatedCompletionTime >= 8, 'green')))

En este ejemplo, 3 colores indican 3 rangos del tiempo de finalización estimado. El Y-axis, sin embargo, muestra otra medida: el precio.

Ejemplo: Colorear por dimensión alternativa

If(Type = 'Antibiotic', 'green',
If(Type = 'Antiviral', 'orange',
If(Type = 'Analgesic', 'blue',
If(Type = 'Anticancer', 'red'))))

En este ejemplo, 4 colores distinguen los marcadores que pertenecen a 4 grupos diferentes (tipos de fármacos). El X-axis muestra otros grupos (países).

Markers

Tipo y tamaño

Para configurar los marcadores, vaya a Appearance > Colors and legend en el panel de propiedades, active el control deslizante Colors y haga lo siguiente:

• Para establecer el tamaño, utilice la opción Size.
• Para establecer el tipo, active el control deslizante Marker shape y seleccione un icono (forma) integrado del menú desplegable inferior.
• Para establecer los marcadores como una imagen personalizada, introduzca un enlace a la imagen en el cuadro de entrada Image URL.

Aquí tiene uno de los iconos integrados:

Tipo por expresión

Puede añadir una expresión definida por el usuario que asigne diferentes iconos integrados a distintos marcadores. Esta opción está disponible cuando los marcadores se colorean por expresión. Para utilizarla,

1. Vaya to Appearance > Colors and legend en el panel de propiedades.
2. Active el control deslizante Marker shape.
3. Introduzca una expresión en el cuadro de entrada Marker shape expression.

En la expresión, debe referirse a los iconos por sus nombres:

'circle'

'cross'

'diamond'

'diagonal-cross'

'square'

'star4'

'line'

'star5'

'trapezium'

'star6'

'pentagon'

'star7'

'arrowhead'

'star10'

'triangle-down'

'arrow-down'

'triangle-up'

'arrow-up'

'triangle-left'

'arrow-left'

'triangle-right'

'arrow-right'

En el ejemplo siguiente, los colores y las formas representan diferentes rangos de la medida mostrada en el Y-axis (precio). Se utiliza la siguiente expresión para establecer las formas:

If(Price < 1, 'triangle-up',
If(Price < 100, 'diamond',
If(Price < 1000, 'cross', 
If(Price >= 1000, 'star4'))))

La expresión que define las formas no tiene por qué ser similar a la expresión que define los colores. Por ejemplo, aquí los colores representan la medida mostrada en el Y-axis (precio), pero las formas representan la dimensión mostrada en el X-axis (país):

If(Country = 'China', 'triangle-up',
If(Country = 'Germany', 'cross',
If(Country = 'USA', 'star4')))

Legend

Cuando el gráfico se colorea por dimensión, la leyenda se genera y colorea automáticamente. Sin embargo, puede desactivarla o personalizarla.

Cuando el gráfico se colorea por expresión, la leyenda está disponible, pero debe añadir y colorear manualmente cada elemento.

Para configurar la leyenda, vaya a Appearance > Colors and legend en el panel de propiedades y haga lo siguiente:

• Para habilitar o deshabilitar, active el control deslizante Legend.
• Para establecer la posición, seleccione Top, Right, Bottom o Left del menú desplegable Position.
• Para establecer la alineación, seleccione una de las opciones disponibles del menú desplegable Alignment.
• Para establecer el título, vaya a Title e introduzca su texto en el cuadro de entrada Title.
• Para configurar la fuente del título, utilice las opciones Style, Color, Size, Family y Shadow.

Para añadir un nuevo elemento de la leyenda,

1. Vaya to Items y active el control deslizante Items (si está presente).
2. Haga clic en Add legend item.
3. Introduzca el nombre del elemento en el cuadro de entrada Label.
4. Para establecer el color, utilice la opción Color.

Los elementos personalizados sustituyen a los generados automáticamente.

En esta captura de pantalla, el gráfico está coloreado por la segunda dimensión y se muestra la leyenda generada automáticamente, con su posición y título personalizados:

Aquí el gráfico está coloreado por expresión y la leyenda muestra elementos personalizados, con su posición y título personalizados:

Axes

X-Axis

El X-axis muestra los nombres de las categorías nominales (la primera dimensión en cualquier estructura de datos).

Para configurar el X-axis, vaya a Appearance > X-axis en el panel de propiedades y haga lo siguiente:

• Para deshabilitar o habilitar las etiquetas, active el control deslizante Labels.
• Para configurar el trazo, vaya a Line y utilice las opciones Line, Color y Style.
• Para configurar el X-grid, active el control deslizante Grid y utilice las opciones inferiores.

Y-Axis

Dependiendo de la estructura de datos, el Y-axis muestra categorías ordinales (los nombres de los anillos) o valores numéricos (correspondientes a la medida).

La posición del Y-axis se ve afectada por el start angle del gráfico.

Para configurar el Y-axis, vaya a Appearance > X-axis en el panel de propiedades y haga lo siguiente:

• Para deshabilitar o habilitar las etiquetas, active el control deslizante Labels.
• Para configurar el trazo, vaya a Line y utilice las opciones Line, Color y Style.
• Para configurar el Y-grid, active el control deslizante Grid y utilice las opciones inferiores.

Además, para establecer el tipo de la escala Y,

1. Vaya a Scale type.
2. Seleccione Linear o Logarithmic del menú desplegable.

Tenga en cuenta que esta opción solo está disponible cuando el Y-axis muestra valores numéricos. Es posible que necesite utilizar el tipo de escala Logarithmic si el rango de los valores es muy amplio.

Grids

El Bullseye chart tiene dos cuadrículas (grids):

• El X-grid intersecta el X-axis y divide el gráfico en sectores.
• El Y-grid intersecta el Y-axis y divide el gráfico en anillos.

Para configurar una cuadrícula, vaya a Appearance > X-axis o Y-axis en el panel de propiedades, active el control deslizante Grid y haga lo siguiente:

• Para configurar el trazo, vaya a Line y utilice las opciones Line, Color y Style.
• Para configurar el relleno, desplácese hacia abajo, seleccione un tipo de relleno del menú desplegable y utilice las opciones disponibles a continuación.

Los X- y Y-grids admiten diferentes esquemas de relleno y ajustes:

Es posible combinar tipos de relleno aplicando diferentes esquemas a distintas cuadrículas. Las siguientes capturas de pantalla muestran la mayoría de los rellenos y sus combinaciones:

Start Angle

Puede ajustar el start angle del gráfico, lo que afecta a la orientación del gráfico y a la posición del Y-axis:

1. Vaya to Appearance > Presentation en el panel de propiedades.
2. Utilice la opción Start angle.

Por defecto, el start angle es 0°.

Inner Radius

Puede ajustar el inner radius del gráfico para establecer el tamaño del espacio abierto en el centro:

1. Vaya to Appearance > Presentation en el panel de propiedades.
2. Utilice la opción Inner radius.

Por defecto, el inner radius es 0%: el centro está ocupado por el anillo interior y no queda espacio adicional.

Labels

Las labels son objetos de texto que están vinculados a los markers y muestran información adicional sobre los puntos de datos que representan.

Por defecto, no hay etiquetas en el gráfico, pero puede habilitarlas y configurarlas. Vaya a Appearance > Labels en el panel de propiedades y haga lo siguiente:

• Para habilitar o deshabilitar, active el control deslizante Labels.
• Para establecer el texto, active el control deslizante Text e introduzca un valor de cadena o una expresión de cadena en el cuadro de entrada.
• Para configurar el fondo, active el control deslizante Background y utilice las opciones Fill, Opacity, Corner type, Border type y Border radius.
• Para configurar la fuente, active el control deslizante Font y utilice las opciones Style, Color, Size, Family y Shadow.
• Para establecer el límite de caracteres, active el control deslizante Character limit e introduzca un número en el cuadro de entrada.

En el ejemplo siguiente, las etiquetas muestran la siguiente expresión:

If(Price >= 1000, Drug & Chr(10) & '$' & Round(Price), ' ')

Tooltips

Los tooltips son cuadros de texto que aparecen cuando el usuario pasa el ratón sobre los markers. Puede establecer un texto de tooltip personalizado.

Tenga en cuenta que es posible establecer el texto del tooltip ya sea 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 los tooltips.

Para deshabilitar o habilitar los tooltips, vaya a Interactivity en el panel de propiedades y active el control deslizante Tooltips.

Para configurar el texto del tooltip,

1. Vaya to Appearance > Tooltips en el panel de propiedades.
2. Active el control deslizante Tooltip text.
3. Introduzca un valor de cadena o una expresión de cadena en el cuadro de entrada.

Aquí tiene un ejemplo de una expresión para configurar el texto del tooltip:

'<b>' & Upper(Drug) & '</b>'&
'<br><i>' & Type & '</i>' &
'<hr>Stage: ' & Phase &
'<br>Estimated Price: $' & Price

Otras características

Interactivity

Por defecto, están disponibles las siguientes funciones de interactividad: selection, snapshots y tooltips. Para desactivarlas o activarlas, vaya a Interactivity en el panel de propiedades y active los siguientes controles deslizantes:

• Selection
• Snapshots
• Tooltips

Calculation Conditions

AnyChart admite calculation conditions: puede establecer una condición que deba cumplirse (true) para que se muestre el objeto. Si la condición no se cumple, se muestra un mensaje personalizado.

Una calculation condition es útil cuando un gráfico o una tabla son muy grandes y hacen que la visualización responda con lentitud. Una calculation condition puede ayudar, por ejemplo, a que un objeto no se muestre hasta que el usuario haya filtrado los datos a un nivel más manejable aplicando selecciones.

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

1. Vaya to Add-ons > Data handling en el panel de propiedades.
2. Introduzca una expresión en el cuadro de entrada Calculation condition.
3. Introduzca un valor de cadena o una expresión de cadena en el cuadro de entrada Displayed message.

Por ejemplo, la siguiente expresión permite mostrar el gráfico solo cuando el usuario selecciona menos de 10 elementos de datos:

If(Count(Drug) < 10, 1, 0)

Si hay demasiados elementos, AnyChart muestra este mensaje:

'There are too many items (' & Count(Drug) & ').'